Alright, so based on my understanding, this is your title:
<h4>Choose your furniture</h4>
I changed it to <h4> instead of <ul>.
Then, you are making these lists that look like this:
<ul> Order 0 </ul>
<li>Product Name </li>
<ul> Order 1 </ul>
<li>Product Name </li>
etc...
The JavaScript that you are using from yesterday is redundant at this point…you would want to change it to this:
var mainContainer = document.getElementById("myData");
for (var i = 0; i < data['layers'].length; i++) {
var whatYouTryToTraverse = data['layers'][i]['items'];
for(var j = 0; j < whatYouTryToTraverse.length; j++){
var ul = document.createElement("ul");
ul.innerHTML = '<ul> <li> Order: ' + whatYouTryToTraverse[j].order + '</li> <ul><li> ' + whatYouTryToTraverse[j].name + '</li> </ul>';
mainContainer.appendChild(ul);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Code Exercise</title>
</head>
<body>
<div class="header">
<div class="title">
<h2>Code Test</h2>
</div>
</div>
<div id="myData">
<h4>Choose your furniture</h4>
</div>
<script>
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'];
for(var j = 0; j < whatYouTryToTraverse.length; j++){
var ul = document.createElement("ul");
ul.innerHTML = '<ul> <li> Order: ' + whatYouTryToTraverse[j].order + '</li> <ul><li> ' + whatYouTryToTraverse[j].name + '</li> </ul>';
mainContainer.appendChild(ul);
}
}
</script>
</body>
</html>
To make this easier to understand, I’ll format the code better:
var mainContainer = document.getElementById("myData");
for (var i = 0; i < data['layers'].length; i++)
{
var whatYouTryToTraverse = data['layers'][i]['items'];
for(var j = 0; j < whatYouTryToTraverse.length; j++)
{
var ul = document.createElement("ul");
ul.innerHTML = '<ul>\
<li> \
Order: ' + whatYouTryToTraverse[j].order + ' \
</li>\
<ul>\
<li>\
' + whatYouTryToTraverse[j].name + ' \
</li> \
</ul>';
mainContainer.appendChild(ul);
}
}
Also, I notice you have a style sheet. In the style sheet, put:
#myData ul, li
{
list-style-type: none;
}
This will get rid to the dots. Now, so far, the output looks like this:
Next steps (I presume) are to add the images and to make this clickable. I don’t know what you mean by make it clickable (what do you want it to do when you click it?), but you can use the same concept as what I did with the <li> tags to put the images where you want them to go. Do you understand? 
Completely understand, when I say it needs to be clickable I mean when you click the name the corresponding image that is in the imgSrc will display on screen. I have a prefix URL for this. I’ll look into this one myself. You’ve helped more than enough
