本教程详细介绍了如何在Web页面中使用JavaScript的Fetch API从远程接口获取JSON数据，并将其动态渲染到HTML表格中。文章涵盖了HTML表格结构、异步数据请求、JSON数据解析、DOM元素操作的最佳实践，特别是强调了`DOMContentLoaded`事件的重要性以及正确使用`innerHTML`来填充表格头部和内容，旨在帮助开发者构建功能完善的数据展示页面。

在现代Web开发中，从后端API获取数据并在前端页面展示是常见的需求。本教程将引导您完成这一过程，重点讲解如何利用JavaScript的Fetch API获取JSON数据，并将其动态地渲染到一个HTML表格中。

1. HTML基础结构准备

首先，我们需要一个基本的HTML页面结构，其中包含一个用于展示数据的表格。为了更好地组织表格内容，我们通常会使用（表格头部）和

  
    
    
  
  
    
NASA设施列表

    

     
  

在上述HTML结构中：

立即学习“前端免费学习笔记（深入）”；

• 我们创建了一个id为data-table的元素。
  和是空的，它们的内容将由JavaScript动态填充。
  用于引入我们的JavaScript逻辑。为了更好的代码组织和维护，强烈建议将JavaScript代码放在单独的文件中。

  2. 使用Fetch API获取数据

  Fetch API是现代浏览器提供的一个强大的接口，用于进行网络请求。它基于Promise，使得处理异步请求更加简洁。

  我们将以NASA的一个公开API为例：https://data.nasa.gov/resource/gvk9-iz74.json。

  // main.js
  
  // 确保DOM完全加载后再执行脚本
  document.addEventListener("DOMContentLoaded", function () {
    fetch("https://data.nasa.gov/resource/gvk9-iz74.json")
      .then((response) => {
        // 检查响应是否成功
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json(); // 将响应体解析为JSON
      })
      .then((data) => {
        // 数据获取成功后，开始渲染表格
        renderTable(data);
      })
      .catch((error) => {
        // 捕获请求或解析过程中的错误
        console.error("获取数据时发生错误:", error);
        document.getElementById('data-table').innerHTML = `

  `; }); });

  关键点解析：

  

  白瓜AI

  白瓜AI，一个免费图文AI创作工具，支持 AI 仿写，图文生成，敏感词检测，图片去水印等等。

  下载
  • document.addEventListener("DOMContentLoaded", function() { ... });: 这是非常重要的一步。它确保了我们的JavaScript代码只在整个HTML文档（DOM）被完全加载和解析后才执行。如果没有这个，JavaScript可能会尝试操作尚未存在的HTML元素，导致错误。
  • fetch(url): 发起一个GET请求到指定的URL。
  • .then((response) => response.json()): fetch返回一个Promise，当请求成功时，response对象可用。我们首先检查response.ok确保HTTP状态码在200-299之间，然后调用response.json()方法，它会再次返回一个Promise，用于将响应体解析为JavaScript对象。
  • .then((data) => { ... }): 当JSON解析成功后，data参数将包含从API获取到的JavaScript对象（通常是数组）。
  • .catch((error) => { ... }): 用于捕获在fetch请求或.then()链中发生的任何错误，例如网络问题、服务器错误或JSON解析失败。

  3. 动态渲染表格内容

  获取到数据后，我们需要将其格式化为HTML表格行，并插入到

  和
  中。

  // main.js (在DOMContentLoaded事件监听器内部，紧接在fetch请求之后)
  
  function renderTable(data) {
    const tableHead = document.querySelector("#data-table thead");
    const tableBody = document.querySelector("#data-table tbody");
  
    // 清空现有内容（可选，如果表格可能被多次更新）
    tableHead.innerHTML = '';
    tableBody.innerHTML = '';
  
    // 1. 渲染表格头部 (

  ) let headerRow = ` `; tableHead.innerHTML = headerRow; // 2. 渲染表格主体 () let rowsHtml = ""; data.forEach((facility) => { // 确保数据字段存在，避免undefined const center = facility.center || 'N/A'; const city = facility.city || 'N/A'; const state = facility.state || 'N/A'; const zipcode = facility.zipcode || 'N/A'; rowsHtml += ` `; }); tableBody.innerHTML = rowsHtml; }

  关键点解析：

  • document.querySelector("#data-table thead") 和 document.querySelector("#data-table tbody"): 使用querySelector选择器精确地获取表格的头部和主体元素。
  • innerHTML vs innerText:
    • innerHTML: 用于设置或获取元素的HTML内容。当您需要将包含HTML标签的字符串插入到DOM中时，必须使用innerHTML。
    • innerText: 仅用于设置或获取元素的纯文本内容。如果您尝试将包含HTML标签的字符串赋给innerText，这些标签将被视为普通文本并显示出来，而不是被浏览器解析为HTML元素。
    • 在原问题中，一个常见的错误是将包含
  、（表格行）字符串，并将其累加到rowsHtml变量中。
  模板字符串: 使用ES6的模板字符串（反引号 `）可以方便地嵌入变量（${variable}）和多行文本，使得HTML字符串的构建更加直观。
  数据健壮性: 在访问facility.center等属性时，最好加上默认值（|| 'N/A'），以防API返回的数据中缺少某个字段，避免页面出现undefined。

  4. 完整代码示例

  将上述HTML和JavaScript代码整合后，您的index.html和main.js文件应如下所示：

  index.html:

  
  
    
      
      
      
    
    
      
  NASA设施列表
  
      

  加载数据失败，请稍后再试。
  中心名称	城市	州	邮编
  ${center}	${city}	${state}	${zipcode}
  等HTML标签的字符串赋给innerText，这会导致表格无法正确渲染。正确的方法是使用innerHTML。 数据遍历与拼接: 使用forEach循环遍历从API获取到的data数组，为每个数据项构建一个

  main.js:

  document.addEventListener("DOMContentLoaded", function () {
    fetch("https://data.nasa.gov/resource/gvk9-iz74.json")
      .then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
      })
      .then((data) => {
        renderTable(data);
      })
      .catch((error) => {
        console.error("获取数据时发生错误:", error);
        const tableElement = document.getElementById('data-table');
        if (tableElement) {
          tableElement.innerHTML = `加载失败无法加载数据，请检查网络或稍后再试。`;
        }
      });
  
    function renderTable(data) {
      const tableHead = document.querySelector("#data-table thead");
      const tableBody = document.querySelector("#data-table tbody");
  
      // 清空现有内容，确保每次渲染都是最新的
      tableHead.innerHTML = '';
      tableBody.innerHTML = '';
  
      // 渲染表格头部
      let headerRow = `
        
          中心名称
          城市
          州
          邮编
        `;
      tableHead.innerHTML = headerRow;
  
      // 渲染表格主体
      let rowsHtml = "";
      data.forEach((facility) => {
        const center = facility.center || 'N/A';
        const city = facility.city || 'N/A';
        const state = facility.state || 'N/A';
        const zipcode = facility.zipcode || 'N/A';
  
        rowsHtml += `
          
            ${center}
            ${city}
            ${state}
            ${zipcode}
          
        `;
      });
      tableBody.innerHTML = rowsHtml;
    }
  });

  总结与注意事项

  通过本教程，您应该已经掌握了在Web页面中从API获取数据并动态渲染到HTML表格的基本方法。以下是一些重要的总结和注意事项：

  • DOMContentLoaded: 始终确保您的JavaScript代码在DOM完全加载后再执行，以避免操作不存在的元素。
  • Fetch API: 它是进行异步网络请求的现代标准，基于Promise，易于使用。
  • response.json(): 用于将API响应体解析为JavaScript对象。
  • innerHTML: 用于动态插入包含HTML标签的字符串。切勿与innerText混淆。
  • 结构化表格: 使用和 可以更好地组织表格内容，便于样式化和语义化。
  • 错误处理: 总是为fetch请求添加.catch()块，以优雅地处理网络错误或数据解析失败的情况，并向用户提供反馈。
  • 数据健壮性: 在访问API返回的数据属性时，考虑数据可能缺失的情况，并提供默认值，增强代码的健壮性。
  • 代码组织: 将JavaScript代码放在单独的.js文件中是一个良好的实践。
  • 性能优化: 对于非常大的数据集，一次性构建和插入大量HTML字符串可能会影响性能。可以考虑虚拟滚动、分页或分批加载等优化策略。