如何从JSON文件提取数据插入innerHTML，解决result.map()未定义报错

map() 是数组专属的原型方法，报错说明你调用该方法的result不是数组类型，常见触发场景：

• 接口/JSON文件返回的根结构是对象，员工列表嵌套在对象的某个属性下（比如data、employees字段），你直接用整个返回对象调用map()
• 异步请求还未返回结果，就提前用初始的非数组值（比如undefined、null）调用map()
• 拿到返回结果后未做JSON解析，用字符串类型的返回值调用map()

你可以直接替换api1-2.js的内容，根据实际的JSON字段调整对应逻辑即可：

// 替换为你的JSON文件/接口地址
const DATA_URL = './employees.json'

fetch(DATA_URL)
  .then(response => {
    if (!response.ok) throw new Error('数据请求失败')
    // 解析JSON格式返回值
    return response.json()
  })
  .then(result => {
    // 核心容错：确保拿到数组再调用map，可根据实际JSON结构调整取数字段
    const employeeList = Array.isArray(result) ? result : result?.data || result?.employees || []

    // 隐藏加载动画
    document.getElementById('loading').style.display = 'none'

    // 拼接表格结构，可根据实际业务字段调整表头和单元格内容
    let tableContent = `
      <thead>
        <tr>
          <th>姓名</th>
          <th>工号</th>
          <th>岗位</th>
          <th>入职时间</th>
        </tr>
      </thead>
      <tbody>
    `

    // 遍历数组生成行内容
    tableContent += employeeList.map(item => `
      <tr>
        <td>${item.name || '-'}</td>
        <td>${item.job_number || '-'}</td>
        <td>${item.post || '-'}</td>
        <td>${item.hire_date || '-'}</td>
      </tr>
    `).join('')

    tableContent += '</tbody>'
    // 渲染到页面表格
    document.getElementById('employees').innerHTML = tableContent
  })
  .catch(error => {
    // 异常处理
    document.getElementById('loading').style.display = 'none'
    document.getElementById('myData').textContent = `数据加载失败：${error.message}`
  })

• 所有操作数据的逻辑要写在异步请求的成功回调内，不要在请求外提前操作还未返回的数据
• 如果JSON返回结构是嵌套对象，调整employeeList的取数逻辑即可，比如列表在result.data.list下，就写为result?.data?.list || []
• map()返回的是数组，必须调用join('')转为字符串后再插入DOM，否则页面会出现多余的逗号分隔符

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