如何读取JSON文件数据填充HTML表格，现有代码报错无法正常渲染

核心错误原因 #

• HTML中tbody的id属性写在了结束标签上，导致document.getElementById('myTable')无法正确获取到表格容器
• 代码中查询了不存在的.content类元素，直接触发空对象赋值报错
• JS逻辑存在变量名冲突、重复绑定点击事件、创建不存在的DOM元素（str不是合法DOM标签）、DOM插入逻辑错误等问题

修复步骤 #

1. 修正HTML代码 #

找到表格部分，修改tbody标签的属性位置：

<!-- 原来的错误写法 -->
<tbody>
</tbody id='myTable'>
<!-- 修改为 -->
<tbody id="myTable">
</tbody>

2. 修正app.js代码 #

直接替换原有app.js的内容，先完成硬编码数据的表格渲染：

import './static/styles.css'

const tableBody = document.getElementById('myTable')
document.querySelector("#submit").onclick = function() {
  // 先清空原有表格内容，避免重复追加
  tableBody.innerHTML = ''
  // 硬编码测试数据
  const trackData = [
    {
      "EndTime": "11:00",
      "Person": [
        {"name": "one","age": 5},
        {"name": "two","age": 7}
      ],
      "StartTime": "10:45",
      "fileName": "track1.json" // 模拟文件名
    },
    {
      "EndTime": "11:05",
      "Person": [
        {"name": "three","age": 6},
        {"name": "four","age": 7}
      ],
      "StartTime": "11:00",
      "fileName": "track2.json" // 模拟文件名
    }
  ]

  // 遍历数据生成行
  trackData.forEach((item, index) => {
    const row = document.createElement('tr')
    row.innerHTML = `
      <td>${index + 1}</td>
      <td>${item.fileName}</td>
      <td>${item.StartTime}</td>
      <td>${item.EndTime}</td>
      <td>${item.Person.length}</td>
    `
    tableBody.appendChild(row)
  })
}

3. 批量读取tracks文件夹下的JSON文件 #

如果需要动态读取所有JSON文件，按以下操作：

• 把存放json的tracks文件夹放到项目的src目录下
• 用webpack的require.context批量导入所有json文件，替换硬编码数据即可：

// 放在app.js顶部，批量导入src/tracks下所有json文件
const trackFiles = require.context('./tracks', false, /\.json$/)
const allTrackData = trackFiles.keys().map(key => {
  return {
    fileName: key.replace('./', ''),
    ...trackFiles(key)
  }
})

之后把app.js里的硬编码trackData替换成allTrackData即可实现动态加载所有json数据。

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