I’ve got this JSON code that needs to displayed as a clickable menu.
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
};
var mainContainer = document.getElementById("myData");
for (var i = 0; i < data['layers'].length; i++) {
var whatYouTryToTraverse = data['layers'][i]['items']; //every one of these objects seems to have an item property which holds the data you are trying to access
for(var j = 0; j < whatYouTryToTraverse.length; j++){
var div = document.createElement("div");
div.innerHTML = 'Order: ' + whatYouTryToTraverse[j].order + ' ' + whatYouTryToTraverse[j].name;
mainContainer.appendChild(div);
}
}
Expected outcome should be something like:
<ul> A menu
<li>Order 0</li>
<li>Product name in ordered format <li>
<li>Order 1</li>
<li>Product name in ordered format <li>
<li>Order 2</li>
<li>Product name in ordered format <li>
</ul>