Creating a clickable menu using nested JSON

1

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>
3

The code at the moment is just displaying as a list. I’m wanting to make this list clickable. I’m wanting to make the names become links which will will display the image in the imgSrc. A prefix will need to be applied as well.

I’m fairly new to all of this. Trying to learn more and more

5

Unfortunately I don’t know how to create the links needed could you help?

7

I know how to create an image using HTML, I’m fairly new to using JavaScript.

9

All sorted on that front. The 2 main issues I’m having though is trying to make it all a clickable menu and being able to prepend the imgSrc from the JSON to the prefix image url

11 
 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);
         div.innerHTML = "<img src='https://s3.eu-west-2.amazonaws.com/pikcells-lab/code-exercise/images/'>";

That is displaying a broken image link because I’m trying to append the prefix to the imgSrc in the object

12

To append the prefix, just concatenate it using the ‘+’ key like so:

div.innerHTML = "<img src='https://s3.eu-west-2.amazonaws.com/pikcells-lab/code-exercise/images/" + theImageSource + "'/>"
13

All sorted everything works as it should