Loop through array of objects, and turn them into LI items in UL

Question

<div id="dataTable">
    <button onclick="show()">Print data</button>

    <ul id="hcplist">

    </ul>
</div>

I need to loop through this

let hcpdata = [{ "name": "David", "hcp": 54 }, { "name": "Jack", "hcp": 5 }, { "name": "Hanna", "hcp": 20 }];

Make <li> items in that loop, and output in a <ul> (hcplist) without jQuery or other libraries — items like "David 54", "Jack 5", etc.

Okay, where did you start? Could you [edit] your question and show your attempts, along with an explanation of what exactly doesn’t work in each of them? — Sebastian Simon, Feb 05 '19 at 16:17
Possible duplicate of [Convert JSON file in
using plain Javascript](https://stackoverflow.com/questions/30199990/convert-json-file-in-ulli-using-plain-javascript) and [Create a
and fill it based on a passed array](https://stackoverflow.com/questions/11128700) and [how to append an array inside a ul in javascript?](https://stackoverflow.com/questions/53561590/) and [Never talking about populate a normal view](https://stackoverflow.com/questions/54152659) — adiga, Feb 05 '19 at 17:03

score -1 · Answer 1 · answered Feb 05 '19 at 16:19

let hcpdata = [{ "name": "David", "hcp": 54 }, { "name": "Jack", "hcp": 5 }, { "name": "Hanna", "hcp": 20 }];

function show() {
  let list = document.getElementById("hcplist");
  hcpdata.forEach((d) => {
    let el = "<li>"+ d.name + " " + d.hcp+"</li>";
    list.innerHTML += el;
  });
}

<div id="dataTable">
    <button onclick="show()">Print data</button>

    <ul id="hcplist">

    </ul>
</div>

Ved_Code_it · Answer 2 · 2019-02-05T16:26:43.757

-1

use this function

  function show()
    {
      let hcpdata = [{ "name": "David", "hcp": 54 }, { "name": "Jack", "hcp": 5 }, { "name": "Hanna", "hcp": 20 }];
    let html='';
    for( let i=0;hecpdata.length;i++){
       html+='<li>'+hecpdata[i].name + ' ' + hecpdata[i].hcp+'</li>'; 
    }
     document.getElementById('hcplist').innerHTML=html;
    }

edited Feb 05 '19 at 16:26

answered Feb 05 '19 at 16:20

Ved_Code_it

704
6
10

Loop through array of objects, and turn them into LI items in UL

2 Answers2