Ajax读取JSON渲染HTML表格报错，求正确实现方法

核心错误排查方向 #

你遇到的SALARY = json[index].salary;报错，大概率是以下三种情况：

• JSON文件格式不合法，导致解析后不是预期的数组/对象
• 异步请求未完成就尝试访问数据，此时json还未被正确赋值
• JSON结构和代码预期不符（比如返回单个对象而非数组，或键名拼写错误，比如Salary而非salary）

步骤1：确保JSON格式完全合规 #

先检查你的JSON文件，必须严格遵循语法规范：

• 所有键名必须用双引号包裹（不能用单引号或无引号）
• 字符串值必须用双引号
• 数组最后一个元素后不能有多余逗号
• 示例合法JSON数组：

[
  {"id": 1, "name": "张三", "salary": 5500, "department": "技术部"},
  {"id": 2, "name": "李四", "salary": 6200, "department": "市场部"},
  {"id": 3, "name": "王五", "salary": 7800, "department": "财务部"}
]

步骤2：修复JS异步逻辑并完成渲染 #

用fetch API（比传统XHR更简洁）处理异步请求，确保数据返回后再执行渲染逻辑，完整代码示例如下：

完整HTML代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>JSON数据渲染表格</title>
  <style>
    table { border-collapse: collapse; width: 80%; margin: 20px auto; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
    th { background-color: #f2f2f2; }
  </style>
</head>
<body>
  <table id="employeeTable">
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>薪资</th>
        <th>部门</th>
      </tr>
    </thead>
    <tbody id="tableBody"></tbody>
  </table>

  <script>
    // 读取本地JSON文件并渲染表格
    fetch('./data.json') // 替换成你的JSON文件实际路径
      .then(response => {
        if (!response.ok) {
          throw new Error('请求失败：' + response.status);
        }
        return response.json(); // 解析JSON数据
      })
      .then(data => {
        const tableBody = document.getElementById('tableBody');
        // 遍历数据生成表格行
        data.forEach(item => {
          const row = document.createElement('tr');
          row.innerHTML = `
            <td>${item.id}</td>
            <td>${item.name}</td>
            <td>${item.salary}</td>
            <td>${item.department}</td>
          `;
          tableBody.appendChild(row);
        });
      })
      .catch(error => {
        console.error('出错了：', error);
        alert('读取数据失败，请检查文件路径或JSON格式');
      });
  </script>
</body>
</html>

关键注意事项 #

1. 文件路径：确保fetch里的路径和你的JSON文件位置匹配，比如JSON和HTML同目录就写./data.json，子目录就写./json/data.json
2. 异步处理：所有依赖JSON数据的操作必须放在.then()回调里，不能在请求外面直接访问数据
3. 键名匹配：JS里访问的item.salary必须和JSON里的键名完全一致（大小写敏感）
4. Live Server验证：必须用VSCode的Live Server启动页面，不要直接打开本地HTML文件（会触发跨域限制）

如果仍报错，打开浏览器控制台（F12）查看具体错误信息：比如如果是Cannot read properties of undefined (reading 'salary')，说明item是undefined，大概率是JSON不是数组，或者遍历逻辑有误。

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