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>
#2

What problems are you experiencing with your current code? What works and what does not work as expected?

#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

#4

Do you know how to create links?

If so, then try to use the for loop to create a list of links first and display that instead.

#5

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

#6

I assume you did not write the code you have provided then. We are not here to just give you solutions. We are here to guide you to be able to create your own solutions.

I suggest you go through our HTML section which will cover displaying images, creating links and displaying images as links.

Once you understand how to do these things, then post your updated code here if you are still having problems.

1 Like
#7

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

#8

The code you have written so far is not basic JavaScript. If you know how to display an image, try starting with that first.

div.innerHTML = html string code to display image

You can build a string using html tags and concatenate the whatYouTryToTraverse[j].imgSrc within the tags.

If you can not do that, then I suggest you go through our Basic JavaScript section which will cover how to do what I have described above.

#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

#10

Post your latest code which creates the link with the image tag as the content.

#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

#14