如何用原生JavaScript从JSON数据填充表格行？基于星球大战API

嘿，我来帮你搞定这个需求！你已经搭好了表格框架，现在要把人类物种下的所有角色名称填进去对吧？咱们一步步来实现：

核心思路说明 #

首先得注意：从https://swapi.co/api/species/1/返回的people字段并不是直接的角色名称数组，而是每个角色的API链接数组。所以咱们得先获取物种数据，再批量请求这些角色链接拿到名称，最后填充到表格里。

完整代码实现 #

假设你的HTML表格已经有一个用于存放行的<tbody>，比如：

<table>
  <thead>
    <tr>
      <th>角色名称</th>
    </tr>
  </thead>
  <tbody id="characterTableBody"></tbody>
</table>
<!-- 可选：加载提示 -->
<div id="loading" style="display:none;">加载中...</div>

然后用原生JS编写数据获取和填充逻辑：

// 获取表格主体和加载提示元素
const tableBody = document.getElementById('characterTableBody');
const loadingElement = document.getElementById('loading');

// 显示加载提示
loadingElement.style.display = 'block';

// 第一步：请求人类物种数据
fetch('https://swapi.co/api/species/1/')
  .then(response => {
    // 检查请求是否成功
    if (!response.ok) throw new Error('物种数据请求失败');
    return response.json();
  })
  .then(speciesData => {
    // 提取所有角色的API链接
    const characterUrls = speciesData.people;
    // 第二步：并行请求所有角色数据（比串行请求效率更高）
    return Promise.all(
      characterUrls.map(url => 
        fetch(url)
          .then(res => {
            if (!res.ok) throw new Error(`角色数据请求失败：${url}`);
            return res.json();
          })
      )
    );
  })
  .then(characters => {
    // 第三步：把每个角色名称填充到表格行
    characters.forEach(character => {
      const row = document.createElement('tr');
      const nameCell = document.createElement('td');
      nameCell.textContent = character.name;
      row.appendChild(nameCell);
      tableBody.appendChild(row);
    });
    // 隐藏加载提示
    loadingElement.style.display = 'none';
  })
  .catch(error => {
    // 处理错误情况
    loadingElement.style.display = 'none';
    console.error('出错啦:', error);
    alert('加载角色数据失败，请稍后重试');
  });

关键细节解释 #

• Promise.all的使用：它能让所有角色请求并行发起，大幅提升加载速度，避免逐个请求的等待时间。
• 错误处理：每个fetch都加了response.ok检查，确保请求成功才继续，失败时会进入catch块处理。
• DOM操作优化：直接通过createElement创建表格行和单元格，比用innerHTML更安全（避免XSS风险）。

可选扩展 #

如果想让表格更丰富，比如添加角色的其他信息（比如身高、出生地），只需要在创建单元格的时候多添加几个<td>，并赋值对应的字段即可，比如：

const heightCell = document.createElement('td');
heightCell.textContent = character.height;
row.appendChild(heightCell);

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