如何从网页获取JSON对象数组并将元素添加至HTML表格行？

嘿，我来帮你搞定这个需求！把JSON数组渲染到HTML表格其实很简单，分几步就能完成，我给你拆解清楚：

1. 先搭好HTML表格的基础架子 #

首先准备一个空表格，给它加个id方便后续JavaScript获取，同时定义好表头：

<table id="data-table" border="1">
  <thead>
    <tr>
      <th>ID</th>
      <th>名称</th>
    </tr>
  </thead>
  <tbody>
    <!-- 后续JSON数据会通过JS插入到这里 -->
  </tbody>
</table>

2. 处理JSON数据（两种常见场景） #

场景一：你已经有现成的JSON数组 #

先提个小细节：你给出的JSON有语法错误，JS里的JSON必须用双引号包裹键和字符串值，且键值对之间要加逗号。修正后的合法数组应该是这样：

// 修正后的JSON数组
const jsonData = [ { "id": 10, "name": "abc" }, { "id": 11, "name": "xyz" } ];

场景二：从网页/后端接口获取JSON数组 #

如果数据是从服务器或页面其他地方获取的，可以用fetch API来请求并解析：

async function fetchData() {
  try {
    // 替换成你的实际数据接口地址
    const response = await fetch('/your-data-api');
    const jsonData = await response.json();
    // 获取到数据后调用渲染函数
    renderTable(jsonData);
  } catch (error) {
    console.error('获取数据失败:', error);
  }
}

3. 编写渲染函数，逐个添加数据到表格 #

写一个通用函数，遍历JSON数组的每个元素，创建表格行并插入到表格中：

function renderTable(data) {
  const tableBody = document.querySelector('#data-table tbody');
  // 先清空表格原有内容（可选，避免重复添加数据）
  tableBody.innerHTML = '';

  // 遍历每个JSON对象，生成表格行
  data.forEach(item => {
    // 创建一行<tr>元素
    const row = document.createElement('tr');

    // 创建ID单元格并赋值
    const idCell = document.createElement('td');
    idCell.textContent = item.id;
    row.appendChild(idCell);

    // 创建名称单元格并赋值
    const nameCell = document.createElement('td');
    nameCell.textContent = item.name;
    row.appendChild(nameCell);

    // 将生成的行添加到表格主体
    tableBody.appendChild(row);
  });
}

4. 整合起来的完整示例 #

把上面的代码组合在一起，就能直接运行了：

<!DOCTYPE html>
<html>
<head>
  <title>JSON转表格示例</title>
</head>
<body>
  <table id="data-table" border="1">
    <thead>
      <tr>
        <th>ID</th>
        <th>名称</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

  <script>
    // 示例：现成的JSON数组
    const jsonData = [ { "id": 10, "name": "abc" }, { "id": 11, "name": "xyz" } ];

    function renderTable(data) {
      const tableBody = document.querySelector('#data-table tbody');
      tableBody.innerHTML = '';

      data.forEach(item => {
        const row = document.createElement('tr');
        
        const idCell = document.createElement('td');
        idCell.textContent = item.id;
        row.appendChild(idCell);

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

        tableBody.appendChild(row);
      });
    }

    // 页面加载完成后执行渲染
    document.addEventListener('DOMContentLoaded', () => {
      // 如果是用现成数组，直接调用
      renderTable(jsonData);
      // 如果是从接口获取，替换成 fetchData()
      // fetchData();
    });

    // 从接口获取数据的函数（可选）
    /*
    async function fetchData() {
      try {
        const response = await fetch('/your-data-api');
        const jsonData = await response.json();
        renderTable(jsonData);
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    }
    */
  </script>
</body>
</html>

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