API获取的JSON数据循环渲染HTML表格失败问题求解

• 你提供的API返回JSON示例未用[]包裹为数组结构，而是多个独立对象用逗号分隔，这种结构不符合JSON规范，JSON.parse()解析时会直接抛出语法错误。即使你当前解析未报错，也说明你拿到的解析结果是单个对象而非数组，单个对象没有length属性，for循环的终止条件i < data.length会判定为false，循环完全不会执行，自然无法渲染表格。
• 你调用warehouseQuant函数时传入的参数是之前解析得到的单个商品对象，而非多条商品组成的数组，也会导致上述循环不执行的问题。

1. 修正API返回的JSON结构 #

要求接口返回多条数据时用数组包裹，修正后的JSON示例如下：

[
  {"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.parse(content)得到的就是标准数组，具备length属性，循环可以正常执行。

2. 兼容单/多条数据场景 #

如果你的接口存在单条返回、多条返回两种情况，可以在渲染函数开头增加格式兼容逻辑，自动把入参转为数组格式，同时优化DOM操作性能：

function warehouseQuant(data){
  // 兼容单条数据场景：如果传入的是对象，统一转为长度为1的数组
  data = Array.isArray(data) ? data : [data];
  let table = document.getElementById("myTable");
  // 优化：先拼接所有行内容，最后一次性更新DOM，减少页面重绘次数
  let rows = '';
  for (let i = 0; i < data.length; i++ ){
    rows += `<tr>
              <td>${data[i].Kodas}</td>
              <td>${data[i].Kaina}</td>
              <td>${data[i].Likutis}</td>
            </tr>`
  }
  table.innerHTML += rows;
}

3. 正确调用渲染函数 #

解析完JSON后，将数组格式的解析结果传入渲染函数即可，如果需要同时展示顶部的单个商品信息，取数组第一个元素的属性即可：

let jsn = JSON.parse(content);
// 渲染库存表格
warehouseQuant(jsn);
// 展示顶部公共商品信息
document.getElementById("Prekes_Kodas").innerText="Kodas: "+jsn[0].Kodas;
document.getElementById("Prekes_Barkodas").innerText="Barkodas: "+jsn[0].KAPKodas;

内容的提问来源于stack exchange，提问作者Artūras Yapaz