18910140161

JavaScript-JSON对象数据到HTML表-堆栈溢出

顺晟科技

2022-10-18 12:34:57

202

我正在尽最大努力遍历从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类型是Object,我会遍历它并访问它的元素,甚至获取长度。有什么建议吗?。

函数(数据为解析后的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 
                }
                }

顺晟科技:

组合所有的行,并将其作为一个完整的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>;

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航