如何使用JavaScript解析JSON数据并正确渲染到HTML表格中

现有代码问题说明 #

• 重复执行了JSON.parse操作，第二次使用的reviver回调没有返回值，最终得到的obj为undefined，无法用于后续数据读取
• 嵌套属性不需要通过reviver回调解析，直接通过属性访问语法即可读取
• 缺少将数据绑定到DOM节点的逻辑

修正后代码 #

基础版本（适配你当前的HTML结构） #

JavaScript代码：

function readTextFile(file, callback) {
  var rawFile = new XMLHttpRequest();
  rawFile.overrideMimeType("application/json");
  rawFile.open("GET", file, true);
  rawFile.onreadystatechange = function() {
    if (rawFile.readyState === 4 && rawFile.status == "200") {
      callback(rawFile.responseText);
    }
  };
  rawFile.send(null);
}

readTextFile("popular-feed.json", function(text) {
  // 只需要解析一次JSON即可
  var data = JSON.parse(text);
  // 读取基础属性写入DOM
  document.getElementById('name').textContent = data.name ?? '-';
  document.getElementById('code').textContent = data.code ?? '-';
  document.getElementById('spread').textContent = data.spread ?? '-';
  // 读取嵌套的1day属性
  console.log('1天涨跌幅：', data['1day'].movement);
  console.log('1天价格：', data['1day'].price);
  // 需要展示嵌套数据可新增对应DOM节点，示例：
  // document.getElementById('movement').textContent = data['1day'].movement ?? '-';
});

表格版本（适配HTML表格展示需求） #

先调整HTML代码：

<table border="1">
  <thead>
    <tr>
      <th>名称</th>
      <th>代码</th>
      <th>点差</th>
      <th>1日波动</th>
      <th>1日价格</th>
    </tr>
  </thead>
  <tbody id="tableBody">
  </tbody>
</table>

对应的JavaScript逻辑：

function readTextFile(file, callback) {
  var rawFile = new XMLHttpRequest();
  rawFile.overrideMimeType("application/json");
  rawFile.open("GET", file, true);
  rawFile.onreadystatechange = function() {
    if (rawFile.readyState === 4 && rawFile.status == "200") {
      callback(rawFile.responseText);
    }
  };
  rawFile.send(null);
}

readTextFile("popular-feed.json", function(text) {
  var data = JSON.parse(text);
  var tableBody = document.getElementById('tableBody');
  // 单条数据构造行逻辑，如果JSON返回的是数组，遍历data执行下方行生成逻辑即可
  var row = document.createElement('tr');
  // 基础字段单元格
  var nameCell = document.createElement('td');
  nameCell.textContent = data.name ?? '-';
  row.appendChild(nameCell);
  
  var codeCell = document.createElement('td');
  codeCell.textContent = data.code ?? '-';
  row.appendChild(codeCell);
  
  var spreadCell = document.createElement('td');
  spreadCell.textContent = data.spread ?? '-';
  row.appendChild(spreadCell);
  
  // 嵌套1day字段单元格
  var movementCell = document.createElement('td');
  movementCell.textContent = data['1day']?.movement ?? '-';
  row.appendChild(movementCell);
  
  var priceCell = document.createElement('td');
  priceCell.textContent = data['1day']?.price ?? '-';
  row.appendChild(priceCell);
  
  tableBody.appendChild(row);
});

兼容低版本浏览器说明：可将?.可选链、??空值合并语法替换为普通判断，示例：data['1day'] && data['1day'].movement != undefined ? data['1day'].movement : '-'

嵌套属性读取说明 #

对于键名是数字开头的属性（比如1day），不能直接用.语法访问（data.1day会报错），需要用方括号语法data['1day']读取，再通过.访问下一级属性即可。

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