JSON对象数据到html表

Posted 2023-05-08

【中文标题】JSON对象数据到html表

【英文标题】：JSON object data to html table

【发布时间】：2021-10-21 18:00:34

【问题描述】：

我正在尽最大努力遍历从 API 获得的 JSON 数据并将其显示在 html 表中。我解析了原始 JSON 并显示了访问它的元素的数据，如下所示：

JSON（数据来自api）：

"PrekesID":656851,"Kodas":"6DUSA000000122","SandKodas1":"20402","Likutis_PP":0,"Likutis":11,"KAPKodas":"5902115799686","KAPPavad":"PRAUSTUVO VOŽTUVAS S","Kaina":40,"PrekesID":656851,"Kodas":"6DUSA000000122","SandKodas1":"20406","Likutis_PP":11,"Likutis":11,"KAPKodas":"5902115799686","KAPPavad":"PRAUSTUVO VOŽTUVAS S","Kaina":40

整个 json 被标记为“内容”，所以：

 let jsn=JSON.parse(content);

     document.getElementById("Prekes_Kodas").innerText="Kodas: "+jsn.Kodas;
                                
     document.getElementById("Prekes_Barkodas").innerText="Barkodas: "+jsn.KAPKodas;

到目前为止，一切都很好。但是我面临一个问题，如果 JSON 类型是对象并且我循环遍历它并访问它的元素甚至获取长度。有什么建议吗？

函数（数据为解析后的JSON）：

    function warehouseQuant(data)
                let table = document.getElementById("myTable");
    
                for (let i = 0; i < data.length; i++ )
                    let row = `<tr>
                                    <td>$data[i].Kodas</td>
<td>$data[i].Kaina</td>
<td>$data[i].Likutis</td>
                                </tr>`
                                table.innerHTML += row 
                
                

【问题讨论】：

如果我理解正确的话，jsn/data 有时是一个数组，有时是一个对象？如果是这样，快速解决方法是将if(!data.length)data=[data] 放在程序的开头

那行得通。谢谢。

【参考方案1】：

组装所有行并将其作为一个整体的 html 块插入。

您的数据没有外括号，但我假设它是一个对象数组。 （如果它最初是在您展示时提供的，则它不是有效的 JSON。）

const data = ["PrekesID":656851,"Kodas":"6DUSA000000122","SandKodas1":"20402","Likutis_PP":0,"Likutis":11,"KAPKodas":"5902115799686","KAPPavad":"PRAUSTUVO VOŽTUVAS S","Kaina":40,"PrekesID":656851,"Kodas":"6DUSA000000122","SandKodas1":"20406","Likutis_PP":11,"Likutis":11,"KAPKodas":"5902115799686","KAPPavad":"PRAUSTUVO VOŽTUVAS S","Kaina":40];

const warehouseQuant = data =>
  document.getElementById("myTable").innerHTML = data.map(
    item => ([
      '<tr>',
      ['Kodas','Kaina','Likutis'].map(
        key => `<td>$item[key]</td>`
      ),
      '</tr>'
    ])
  ).flat(Infinity).join('');
  
warehouseQuant(data);

<table id="myTable"></table>