在HTML表格中展示外部JSON数据出现undefined报错如何解决

问题根源 #

• 核心错误是前端varer.js中遍历数组使用了错误的语法：for...in是用来遍历对象的键名，遍历数组元素应该用for...of，你当前拿到的goods实际上是数组的下标数字，自然不存在varer、pris等属性，所以渲染为undefined
• 辅助问题：fetch的catch回调写法错误，没有包裹为函数，请求出错时会直接打印error而不是触发时打印；img标签没有闭合，可能导致HTML渲染异常
• 补充校验：要确保后端/getproducts接口返回的products就是你varer.json里的数组结构，不是被外层包裹了对象

修复后的代码 #

varer.js #

document.getElementById("clickMe").addEventListener('click', async() => {
  let table = document.getElementById('varerTable');
  try {
    let res = await fetch("http://localhost:8200/varer/getproducts", {
      method: 'GET', 
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    })
    let result = await res.json();
    // 调试用：确认接口返回结构
    console.log("接口返回数据：", result);

    let tableHtml = `<tr>
    <th>varer</th>
    <th>pris</th>
    <th>billede</th>
    </tr>
    `;
    // 把for...in修改为for...of遍历数组元素
    for(const goods of result){
      tableHtml += `
      <tr>
      <td>${goods.varer}</td>
      <td>${goods.pris}</td>
      <td><img src="${goods.billede}" style="height:50px;width:50px;"></td>
      </tr>
      `;
    }
    table.innerHTML = tableHtml;
  } catch (err) {
    console.log("请求出错：", err);
  }
});

校验步骤 #

• 打开浏览器控制台，点击触发按钮后查看打印的接口返回数据，确认返回的是数组结构，每个元素都有varer、pris、billede三个属性
• 检查后端products变量是否就是读取varer.json得到的数组，没有被额外嵌套对象

内容的提问来源于stack exchange，提问作者mikkel