Menu
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);
**JAVASCRIPT:
“`<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>
Edited by site staff: Adjusted code formatting.