Create list menu from json response

Question

I am working on a project where I am getting the JSON output below and want to create a menu from it. Group having parent and child menu using JavaScript:

myArray = [
  {group: "one", color: "red"},
  {group: "two", color: "blue"},
  {group: "one", color: "green"},
  {group: "one", color: "black"}
]

I want the output below in html

One
  red
  green
  black
Two
  blue

<ul class="nested">one
  <li><a href=“red”>red</li>
  <li><a href=“green”>green</li>
  <li><a href=“black”>black</li>
</ul>
<ul class="nested">two
  <li><a href=“blue”>blue</li>
</ul>

Stack Overflow is not a free code writing service. You are expected to try to write the code yourself. After doing more research if you have a problem you can post what you've tried with a clear explanation of what isn't working and providing a minimal reproducible example. I suggest reading How to Ask a good question. Also, be sure to take the tour — bfris
– bfris, Commented Sep 30, 2019 at 22:14

Vince · Accepted Answer · 2019-09-30 20:02:01Z

2

The first step here is going to be keying the array by the group property. I would do something like this:

let keyedMenu = {};
myArray.forEach((item) => {
  if (!keyedMenu[item.group]) {
    keyedMenu[item.group] = [];
  }
  keyedMenu[item.group].push(item);
});

Now you have your data in a structure that looks like this:

{
  one: [
    { group: 'one', color: 'red' },
    { group: 'one', color: 'green' },
    { group: 'one', color: 'black' }
  ],
  two: [ 
    { group: 'two', color: 'blue' }
  ]
}

The next step is creating the markup from this data structure:

let markup = ``;
Object.keys(keyedMenu).forEach((key) => {
  markup += `<ul class="nested">${ key }`;

  keyedMenu[key].forEach((item) => {
    markup += `<li><a href="${ item.color }">${ item.color }</a></li>`;
  });

  markup += `</ul>`;
});

Finally, you'll want to inject this markup into the DOM:

$('target-element-selector').html(markup);

answered Sep 30, 2019 at 20:02

Vince

3,3181 gold badge21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Opoku Debrah Over a year ago

Thanks for your quick responses. I am not good at JavaScript. Pls can u put all the code today, for me to understand it at my level? Assuming I want to render it in <div Id=“mymenu><\div>

Vince Over a year ago

I'm not sure what more you are asking for... but the code I have included in my answer will get you what you want.

Opoku Debrah Over a year ago

Thanks for your help. Will try it and get back to you.

Collectives™ on Stack Overflow

Create list menu from json response

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related