如何将指定格式JSON数据插入JavaScript HTML主列表表格？

嘿，这事儿不难，我刚好处理过类似需求，给你一步步拆解怎么做：

步骤1：搭建HTML表格框架 #

先把目标表格的基础结构写好，表头固定，用tbody来动态填充数据行：

<table border="1">
  <thead>
    <tr>
      <th>名称</th>
      <th>计数</th>
      <th>时间</th>
      <th>语言</th>
      <th>诊断</th>
    </tr>
  </thead>
  <tbody id="tableBody">
    <!-- 动态数据行将插入这里 -->
  </tbody>
</table>

步骤2：修正并准备JSON数据 #

你提供的JSON格式有个小问题——对象的键需要用双引号包裹，先调整成合法格式：

const jsonData = {
  "query": { "count": 10, "created": "2015-12-09T17:12:09Z", "lang": "en-US", "diagnostics": {} },
  "test1": { "count": 16, "created": "2015-12-09T17:12:09Z", "lang": "en-US", "diagnostics": {} },
  "bold": { "count": 1, "created": "2015-12-09T17:12:09Z", "lang": "en-US", "diagnostics": {} },
  "home": { "count": 1, "created": "2015-12-09T17:12:09Z", "lang": "en-US", "diagnostics": {} }
};

注：你示例里“诊断”列的值是2，我猜是diagnostics对象的属性数量？如果是其他逻辑，后面可以自己调整代码~

步骤3：用JavaScript动态生成表格行 #

核心逻辑就是遍历JSON的每个键值对，为每个条目创建一行，再把字段内容塞进对应单元格：

// 获取表格的tbody容器
const tableBody = document.getElementById('tableBody');

// 遍历JSON数据的每个属性
for (const [name, details] of Object.entries(jsonData)) {
  // 创建新的表格行
  const row = document.createElement('tr');

  // 填充“名称”列
  const nameCell = document.createElement('td');
  nameCell.textContent = name;
  row.appendChild(nameCell);

  // 填充“计数”列
  const countCell = document.createElement('td');
  countCell.textContent = details.count;
  row.appendChild(countCell);

  // 填充“时间”列
  const createdCell = document.createElement('td');
  createdCell.textContent = details.created;
  row.appendChild(createdCell);

  // 填充“语言”列
  const langCell = document.createElement('td');
  langCell.textContent = details.lang;
  row.appendChild(langCell);

  // 填充“诊断”列（这里按你示例的2，取diagnostics的属性数量）
  const diagnosticsCell = document.createElement('td');
  diagnosticsCell.textContent = Object.keys(details.diagnostics).length;
  row.appendChild(diagnosticsCell);

  // 把组装好的行添加到表格里
  tableBody.appendChild(row);
}

完整可运行示例 #

把上面的代码整合起来，直接就能看到效果：

<!DOCTYPE html>
<html>
<head>
  <title>JSON转表格示例</title>
</head>
<body>
<table border="1">
  <thead>
    <tr>
      <th>名称</th>
      <th>计数</th>
      <th>时间</th>
      <th>语言</th>
      <th>诊断</th>
    </tr>
  </thead>
  <tbody id="tableBody">
  </tbody>
</table>

<script>
const jsonData = {
  "query": { "count": 10, "created": "2015-12-09T17:12:09Z", "lang": "en-US", "diagnostics": {} },
  "test1": { "count": 16, "created": "2015-12-09T17:12:09Z", "lang": "en-US", "diagnostics": {} },
  "bold": { "count": 1, "created": "2015-12-09T17:12:09Z", "lang": "en-US", "diagnostics": {} },
  "home": { "count": 1, "created": "2015-12-09T17:12:09Z", "lang": "en-US", "diagnostics": {} }
};

const tableBody = document.getElementById('tableBody');

for (const [name, details] of Object.entries(jsonData)) {
  const row = document.createElement('tr');

  const nameCell = document.createElement('td');
  nameCell.textContent = name;
  row.appendChild(nameCell);

  const countCell = document.createElement('td');
  countCell.textContent = details.count;
  row.appendChild(countCell);

  const createdCell = document.createElement('td');
  createdCell.textContent = details.created;
  row.appendChild(createdCell);

  const langCell = document.createElement('td');
  langCell.textContent = details.lang;
  row.appendChild(langCell);

  const diagnosticsCell = document.createElement('td');
  diagnosticsCell.textContent = Object.keys(details.diagnostics).length;
  row.appendChild(diagnosticsCell);

  tableBody.appendChild(row);
}
</script>
</body>
</html>

如果你的“诊断”列需要展示其他内容（比如diagnostics里的具体字段），只需要修改diagnosticsCell.textContent这一行就行——比如diagnostics里有个errorCode属性，就改成details.diagnostics.errorCode。

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