Click here to Skip to main content
14,668,498 members
Rate this:
Please Sign up or sign in to vote.
So I've got this JSON file (attached). I cannot get it to display in HTML when I call the function in JavaScript.
Any help?

`const data = {
"layers": [{
"order": 0,
"items": [{
"order": 2,
"name": "Randomly Generous Red",
"imgSrc": "jeb.png"
},

        {
            "order": 1,
            "name": "Too Agreeable Silver",
            "imgSrc": "VRC.png"
        },

        {
            "order": 3,
            "name": "Almost Whispy Blue",
            "imgSrc": "58Z.png"
        },

        {
            "order": 0,
            "name": "Some Times Juicy Red",
            "imgSrc": "081.png"
        }
    ]
},

{
    "order": 1,
    "items": [{
            "order": 0,
            "name": "Never Substantial Silver",
            "imgSrc": "BWK.jpg"
        },

        {
            "order": 1,
            "name": "Really Adorable Pink",
            "imgSrc": "hk9.jpg"
        }
    ]
},

{
    "order": 2,
    "items": [{
            "order": 2,
            "name": "Very Honest Black",
            "imgSrc": "0Og.png"
        },

        {
            "order": 4,
            "name": "Never Eager Red",
            "imgSrc": "2Ks.png"
        },

        {
            "order": 0,
            "name": "Kind Of Adorable Silver",
            "imgSrc": "L99.png"
        },

        {
            "order": 3,
            "name": "Some Times Confident Pink",
            "imgSrc": "Wx4.png"
        },

        {
            "order": 1,
            "name": "Never Brave Blue",
            "imgSrc": "020.png"
        }
    ]
}
],
"default_configuration": [
0,
1,
4
]
};

const sorted = {
'layers': data.layers
.sort(({ order: a }, { order: b}) => a - b)
.map(o => { 
o.items.sort(({ order: a }, { order: b}) => a - b);
return o;
}),
'default_configuration': data.default_configuration
};

console.log(sorted);`


What I have tried:

`<script>

fetch('url')
.then(function (response) {
return response.json();
})
.then(fucntion(data) {
appendData(data);
})
.catch(function (err) {
console.log(err);
});

function appendData(data) {
var mainContainer = document.getElementById("myData");
for (var i = 0; i < data.length; i++) {
var div = document.createElement("div");
div.innerHTML = 'Name: ' + data.order + ' ' + data.name;
mainContainer.appendChild(div);
}
}

</script>`
Posted
Updated 10-Dec-19 5:49am
v2

Rate this:
Please Sign up or sign in to vote.

Solution 1

Well for starters there is a typo in your code
fetch('url')
	.then(function (response) {
		return response.json();
	})
	.then(fucntion(data) {         // function ( not fucntion )
		appendData(data);
	})

.catch(function (err) {
	console.log(err);
});
   
Rate this:
Please Sign up or sign in to vote.

Solution 2

my first impression is that your JSON contains nested array and you are looping only the first array where as name and order is part of your second array. check this.

for (var i = 0; i < data.items.length; i++) {
var div = document.createElement("div");
div.innerHTML = 'Name: ' + data.items[i].order + ' ' + data.items[i].name;
mainContainer.appendChild(div);
}
   
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100