原创投稿
  1. 创想鸟首页
  2. 用户投稿

Web前端：如何在HTML页面中高效获取API数据并动态渲染表格

程序猿 • • 用户投稿

web前端：如何在html页面中高效获取api数据并动态渲染表格

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

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

1. HTML基础结构准备

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

（表格头部）和

（表格主体）标签。

      API数据动态表格            
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 = `加载数据失败，请稍后再试。`;    });});

关键点解析：

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 += `              ${center}        ${city}        ${state}        ${zipcode}          `;  });  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元素。在原问题中，一个常见的错误是将包含、等HTML标签的字符串赋给innerText，这会导致表格无法正确渲染。正确的方法是使用innerHTML。数据遍历与拼接: 使用forEach循环遍历从API获取到的data数组，为每个数据项构建一个（表格行）字符串，并将其累加到rowsHtml变量中。模板字符串: 使用ES6的模板字符串（反引号 `）可以方便地嵌入变量（${variable}）和多行文本，使得HTML字符串的构建更加直观。数据健壮性: 在访问facility.center等属性时，最好加上默认值（|| ‘N/A’），以防API返回的数据中缺少某个字段，避免页面出现undefined。

4. 完整代码示例

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

index.html:

      API数据动态表格              /* 简单的表格样式，使其更具可读性 */      table {        width: 100%;        border-collapse: collapse;        margin-top: 20px;      }      th, td {        border: 1px solid #ddd;        padding: 8px;        text-align: left;      }      th {        background-color: #f2f2f2;      }            
NASA设施列表

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字符串可能会影响性能。可以考虑虚拟滚动、分页或分批加载等优化策略。

以上就是Web前端：如何在HTML页面中高效获取API数据并动态渲染表格的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1602155.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
html怎么在夜神运行_夜神运行html方法【教程】
上一篇 2025年12月23日 16:06:54
使用Flexbox构建响应式布局：解决元素居中与并排显示难题
下一篇 2025年12月23日 16:07:05

相关推荐

  • 惠普无线网卡驱动怎么安装 一招解决驱动问题

    惠普无线网卡驱动怎么安装 一招解决驱动问题惠普无线网卡驱动怎么安装 一招解决驱动问题惠普无线网卡驱动怎么安装 一招解决驱动问题惠普无线网卡驱动怎么安装 一招解决驱动问题

    在使用惠普（hp）笔记本电脑时，不少用户会遇到无法连接无线网络的问题，其中最常见的原因就是无线网卡驱动未安装或出现异常。尤其是在重装系统后，驱动丢失的情况更为普遍。那么，该如何安装惠普无线网卡驱动呢？下面将介绍几种简单有效的安装方式。 一、无线网卡驱动是什么？ 无线网卡驱动相当于操作系统与无线网卡之…

    程序猿的头像 程序猿
    2026年8月26日 • 用户投稿
    000

  • Java中jmap的作用 解析堆转储

    Java中jmap的作用 解析堆转储Java中jmap的作用 解析堆转储Java中jmap的作用 解析堆转储Java中jmap的作用 解析堆转储

    jmap通过命令jmap -dump:live,format=b,file=文件名.hprof 进程id生成堆转储文件，具体步骤为：1.使用jps获取java进程id；2.执行带live参数的jmap命令以仅导出存活对象，减少文件体积；3.通过分析工具如eclipse mat、visualvm或ap…

    程序猿的头像 程序猿
    2026年8月26日 • 用户投稿
    000

  • 电脑主机内存频率与时序详解，帮助用户了解内存性能指标及调整方法

    电脑主机内存频率与时序详解，帮助用户了解内存性能指标及调整方法电脑主机内存频率与时序详解，帮助用户了解内存性能指标及调整方法电脑主机内存频率与时序详解，帮助用户了解内存性能指标及调整方法电脑主机内存频率与时序详解，帮助用户了解内存性能指标及调整方法

    内存性能要看频率与时序的平衡。频率决定数据传输速度上限，但实际表现受时序影响，高频内存若时序过松，延迟可能与低频内存相近；选择内存应先看主板支持频率，搭配合适cpu平台，同频选cl值更低的产品；时序以cl值为核心，数值越低延迟越小，游戏场景更受益于低时序，而多任务处理则更依赖高频带来的带宽优势；调整…

    程序猿的头像 程序猿
    2026年8月26日 • 用户投稿
    000

  • 如何为Composer插件提供灵活且结构化的配置？使用cweagans/composer-configurable-plugin轻松实现！

    可以通过一下地址学习composer：学习地址 一、 composer插件配置的痛点 想象一下，你正在开发一个很棒的Composer插件，或者在使用一个第三方插件，它需要在不同的项目或部署环境中表现出不同的行为。为了实现这种灵活性，你的插件需要一些配置参数。那么问题来了：这些配置应该放在哪里？如何管…

    程序猿的头像 程序猿
    用户投稿 2026年8月26日
    000
  • iPhone16如何设置返回导航键 用户投稿

    iPhone16如何设置返回导航键

    一、打开设置界面 在手机主屏上找到标有“设置”的应用图标，轻触进入。这里是管理iPhone各项功能的核心区域。 二、进入系统管理菜单 在设置列表中向下滑动，定位到“系统”选项并点击进入。该菜单集中了与设备基础操作相关的配置功能。 三、查找导航功能设置 在“系统”页面中，寻找名为“导航”的功能入口。该…

    程序猿的头像 程序猿
    2026年8月26日
    000
  • 80 PLUS 认证等级背后的真相：转换效率与纹波测试 用户投稿

    80 PLUS 认证等级背后的真相：转换效率与纹波测试

    80 PLUS认证衡量电源转换效率，等级越高效率越高，从白牌到钛金牌及新增红宝石标准，要求逐步提升，其中红宝石在50%负载下效率需达96.5%以上；高效率降低能耗与发热，延长硬件寿命。同时，纹波测试评估输出稳定性，+12V纹波应低于120mV，优质电源纹波更低，确保系统稳定运行。高效与低纹波结合，提…

    程序猿的头像 程序猿
    2026年8月26日
    000
  • win10系统Exploit protection不能更改的解决方法 用户投稿

    win10系统Exploit protection不能更改的解决方法

    在win10系统里，部分用户反馈无法正常调整“exploit protection”的设置，这可能与对比游戏性能有关，特别是在csgo游戏中需要覆盖系统配置时，却遇到了“显示由管理员进行管理”的提示，导致无法修改相关选项。这种情况通常是由用户权限不足引起的。为了解决这个问题，建议切换到具有管理员权限…

    程序猿的头像 程序猿
    2026年8月26日
    000

  • 华硕主机散热系统设计及机箱风道优化技巧

    华硕主机散热系统设计及机箱风道优化技巧华硕主机散热系统设计及机箱风道优化技巧华硕主机散热系统设计及机箱风道优化技巧华硕主机散热系统设计及机箱风道优化技巧

    合理布局风扇和优化风道可提升华硕主机散热效率，具体建议如下：1. 华硕主机预装风扇配置通常为前置进风+后置出风，部分机型加装顶部或底部风扇，中高端平台需视温度增加风扇；2. 风道布局推荐均压或正压，兼顾散热与防尘；3. 根据功耗配置风扇数量和位置，低、中、高功耗平台分别配置1个、3个及以上风扇；4.…

    程序猿的头像 程序猿
    2026年8月26日 • 用户投稿
    000

  • Java中堆内存和栈内存的区别及内存管理机制

    Java中堆内存和栈内存的区别及内存管理机制Java中堆内存和栈内存的区别及内存管理机制Java中堆内存和栈内存的区别及内存管理机制Java中堆内存和栈内存的区别及内存管理机制

    堆内存用于存储对象实例，栈内存用于方法调用和局部变量。1. 堆内存由垃圾回收器管理，线程共享，生命周期长，适合存储动态分配的对象；2. 栈内存自动管理，线程私有，生命周期短，适合存储局部变量和方法调用帧；3. 区分两者是为了优化内存管理和性能；4. 堆溢出可通过分析内存泄漏、优化代码、增加堆内存等解…

    程序猿的头像 程序猿
    2026年8月26日 • 用户投稿
    100

  • 电脑主机启动不起来怎么回事 五种解决方法

    电脑主机启动不起来怎么回事 五种解决方法电脑主机启动不起来怎么回事 五种解决方法电脑主机启动不起来怎么回事 五种解决方法电脑主机启动不起来怎么回事 五种解决方法

    电脑按下电源键后毫无反应或无法正常启动，确实让人感到困扰。那么，电脑主机无法启动的原因究竟是什么？本文将为你梳理常见的故障表现，深入分析可能原因，并提供五种实用的解决方法，助你快速排查问题，恢复电脑正常使用。 一、电脑主机无法启动的常见现象 “无法启动”这一问题在实际中可能表现为多种情况，主要包括：…

    程序猿的头像 程序猿
    2026年8月26日 • 用户投稿
    200
  • 多服务器环境下Session共享方案 用户投稿

    多服务器环境下Session共享方案

    多服务器环境下需要session共享以确保用户体验的连贯性和数据的一致性。实现方案包括：1) 使用redis或memcached进行集中式session管理，优点是高效处理大规模数据，但增加了系统复杂性和单点故障风险；2) 使用session复制，通过服务器间同步session数据，优点是无需额外存…

    程序猿的头像 程序猿
    2026年8月26日
    000

  • Java中反射机制的优缺点及适用场景探讨

    Java中反射机制的优缺点及适用场景探讨Java中反射机制的优缺点及适用场景探讨Java中反射机制的优缺点及适用场景探讨Java中反射机制的优缺点及适用场景探讨

    反射是一种让程序在运行时动态获取类信息并操作类或对象的能力，它使程序能够检查、修改类的结构并调用其方法和属性。优势包括：1. 提供动态性与灵活性；2. 支持框架设计如spring的依赖注入；3. 实现插件系统的动态加载；4. 构建动态代理以执行额外操作；5. 开发通用工具处理各种类型对象。劣势有：1…

    程序猿的头像 程序猿
    2026年8月26日 • 用户投稿
    000
  • PCIe Riser 延长线对显卡性能的损耗实测 用户投稿

    PCIe Riser 延长线对显卡性能的损耗实测

    使用合格的PCIe Riser延长线对显卡性能影响极小，实测显示性能损耗在1%-2%之间，帧数波动不超过1-2帧，基本处于误差范围内，实际体验无感知；即便是高端显卡如RTX 4090在PCIe 5.0平台搭配4.0延长线，数据传输速率和极限负载表现也无明显差异；选购时需注意版本匹配、供电连接可靠，并…

    程序猿的头像 程序猿
    2026年8月26日
    100

  • 如何解决PHP中复杂的HTML/XML解析与操作问题，arthurkushman/query-path助你轻松驾驭！

    可以通过一下地址学习composer：学习地址 告别繁琐：PHP 处理 HTML/XML 的痛与思 在日常的 php 开发中，我们经常需要与各种 html 或 xml 文档打交道。无论是从第三方网页抓取信息，还是处理复杂的 xml 配置，亦或是动态生成和修改 html 片段，这些任务都不可避免。然而…

    程序猿的头像 程序猿
    用户投稿 2026年8月26日
    000

  • 告别PHP命令行参数混乱：nategood/commando助你打造优雅CLI工具！

    可以通过一下地址学习composer：学习地址 命令行工具开发的“痛点” 作为php开发者，我们经常需要编写一些命令行脚本来执行自动化任务、数据处理或系统维护。一开始，我们可能习惯于直接使用php内置的 $argv 超全局变量来获取命令行参数，或者尝试使用 getopt() 函数进行稍微结构化的解析…

    程序猿的头像 程序猿
    用户投稿 2026年8月26日
    000
  • 摄像机怎么恢复出厂设置_摄像机恢复出厂设置的操作步骤与注意事项 用户投稿

    摄像机怎么恢复出厂设置_摄像机恢复出厂设置的操作步骤与注意事项

    恢复出厂设置可解决登录问题或清除配置，适用于转售设备。首先通过物理按键复位，适用于带Reset孔的摄像机，通电状态下长按5-10秒至指示灯红蓝闪烁即可；其次可通过Web界面操作，需登录同网段摄像机IP，在系统维护中点击恢复出厂设置；第三种方式为手机APP远程重置，解绑设备后重新添加并勾选强制恢复选项…

    程序猿的头像 程序猿
    2026年8月26日
    200

  • 如何解决HEIC/AVIF图片转换难题？使用Composer和heif-converter轻松搞定！

    可以通过一下地址学习composer：学习地址 告别 HEIC/AVIF 图片兼容性烦恼：用 Composer 玩转 heif-converter 相信很多朋友都有过这样的经历：朋友用 iphone 拍了张照片发给你，结果你发现它是个 .heic 文件。或者，你在网上下载了一些高质量的图片，发现它们…

    程序猿的头像 程序猿
    用户投稿 2026年8月26日
    000

  • Java中如何旋转图片 分析图像旋转的实现

    Java中如何旋转图片 分析图像旋转的实现Java中如何旋转图片 分析图像旋转的实现Java中如何旋转图片 分析图像旋转的实现Java中如何旋转图片 分析图像旋转的实现

    图像旋转通过坐标变换实现，核心步骤包括确定旋转中心、计算旋转矩阵、应用变换、处理边界及插值。旋转中心通常为图像中心，也可自定义；旋转矩阵描述二维空间中绕点逆时针旋转的数学关系；使用逆矩阵将目标像素映射回原始坐标；旋转后图像可能超出边界，需裁剪或填充；插值常用最近邻、双线性或双三次方法，其中双线性在速…

    程序猿的头像 程序猿
    2026年8月26日 • 用户投稿
    300
  • AI做文本校对怎么用_GrammarlyAI语法检查高级技巧 用户投稿

    AI做文本校对怎么用_GrammarlyAI语法检查高级技巧

    AI校对是效率工具但不能替代人工，正确用法是将其作为助手。首先用Grammarly检查拼写、语法，再利用其风格一致性、上下文分析功能优化表达；结合自定义规则和主动学习提升匹配度。使用时需结合语境判断建议合理性，重点修改不确定内容，并积累常见错误经验。隐私方面要注意数据上传风险，敏感内容应选本地或开源…

    程序猿的头像 程序猿
    2026年8月26日
    000
  • 私信自动回复卡片违规吗？私信自动回复卡片违规吗安全吗 用户投稿

    私信自动回复卡片违规吗？私信自动回复卡片违规吗安全吗

    随着社交媒体的普及，越来越多的人开始使用私信功能进行交流。近年来，一种名为“私信自动回复卡片”的现象在社交媒体上引起了广泛争议。这种自动回复卡片真的违规吗？本文将为您揭开这一谜团。 一、什么是私信自动回复卡片？ 在社交媒体上，许多用户为了方便快捷地回复私信，会选择使用自动回复卡片。这种卡片通常包含一…

    程序猿的头像 程序猿
    2026年8月26日
    000

发表回复

登录后才能评论
关注微信