JSON对象数据到html表答案

【问题标题】：JSON object data to html tableJSON对象数据到html表
【发布时间】：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] 放在程序的开头
那行得通。谢谢。

标签： javascript html jquery json

【解决方案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);

&lt;table id="myTable"&gt;&lt;/table&gt;

【讨论】：