循环遍历对象数组，并将它们转换为 UL 中的 LI 项 [重复]答案

【问题标题】：Loop through array of objects, and turn them into LI items in UL [duplicate]循环遍历对象数组，并将它们转换为 UL 中的 LI 项 [重复]
【发布时间】：2019-06-29 12:27:58
【问题描述】：

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

    <ul id="hcplist">

    </ul>
</div>

我需要遍历这个

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

在该循环中创建 <li> 项目，并在没有 jQuery 或其他库的情况下以 <ul> (hcplist) 输出 — 诸如“David 54”、“Jack 5”等项目。

【问题讨论】：

到目前为止你尝试了什么？
好的，你从哪里开始的？您能否edit 提出您的问题并展示您的尝试，并解释一下每种方法到底有哪些不起作用？
Convert JSON file in <ul><li> using plain Javascript 和 Create a <ul> and fill it based on a passed array 和 how to append an array inside a ul in javascript? 和 Never talking about populate a normal view 可能重复

标签： javascript html

【解决方案1】：

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>

【讨论】：

【解决方案2】：

使用这个功能

  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;
    }

【讨论】：