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

Posted 2023-03-05

【中文标题】循环遍历对象数组，并将它们转换为 UL 中的 LI 项 [重复]

【英文标题】：Loop through array of objects, and turn them into LI items in UL [duplicate]

【发布时间】：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 可能重复

【参考方案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;