How to use Object key as header and values child lists in JavaScript

Question

I have a simple json file which includes mathematical operational information. I want to lis json data into inside ul, so that, object key should be header with header class, and its values should list after the each header.

My script file:

{
  "Operations":{
   " Arithmetic Operations" : ["+", "-", "*", "/"],
   "Comparision Operations" : ["Equals","Greater than","Greater than equal to","Less than","Less than equal to"]
  }
}

fetch('./js/data.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    fetchList(data['Operations'])
  });

fetchList = data => {
  Object.entries(data).forEach(([key, values]) => {
    let list;
    values.forEach(item => {
      list = `<li class="list">${ item }</li>`;
    });

    const li =
      `<li class="head">${ key }</li>
        ${ list }
    `;

    console.log(li)
    document.querySelector('#operations .lists').innerHTML += li
  });
}

Result shows only last values of each one

<li class="head"> Arithmetic Operations</li>
<li class="list">/</li>
<li class="head">Comparision Operations</li>
<li class="list">Less than equal to</li>

list = just overwrites the value each time. I think you meant to use += rather than =, after first initialising list to an empty string. — Robin Zigmond
– Robin Zigmond, Commented Nov 7, 2020 at 0:23

Praveen Kumar Purushothaman · Accepted Answer · 2020-11-07 00:37:12Z

1

Since there are no dupes, I'll answer it. There are two things here.

Replace: =
Append: +=

What you're doing is replacing. What you need to be doing is appending. Your solution is:

let list = "";
values.forEach(item => {
  list += `<li class="list">${ item }</li>`;
});

An example snippet to show you what's happening will be:

var arr = ["One", "Two", "Three"];

var one = "";
arr.forEach(function (a) {
  one = a;
});
console.log(one);

var two = "";
arr.forEach(function (a) {
  two += a;
});
console.log(two);

I hope you understand the cases above with the variables one and two. You're looking for two but you have implemented one.

answered Nov 7, 2020 at 0:37

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

Collectives™ on Stack Overflow

How to use Object key as header and values child lists in JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related