本教程旨在指导如何使用javascript从api获取数据，并在网页表格中动态展示。核心内容包括数据全局存储、利用`array.prototype.filter()`方法实现高效的数据搜索功能，并根据用户输入实时更新表格内容，同时强调代码结构优化和大小写不敏感的搜索实现。
在现代前端应用中，从API获取数据并以交互式表格的形式呈现是常见的需求。当数据量较大时，用户需要一个搜索功能来快速定位所需信息。本文将详细介绍如何利用JavaScript实现这一功能，包括数据获取、全局存储、动态表格渲染以及基于用户输入的实时搜索过滤。
1. 核心技术栈概述
实现这一功能主要依赖以下JavaScript核心技术：
Fetch API: 用于异步获取远程API数据。DOM 操作: 用于动态创建、修改和更新网页元素，特别是表格行。Array.prototype.filter(): 数组的高阶函数，用于根据指定条件筛选数组元素，是实现搜索功能的核心。事件监听器: 用于捕获用户在搜索框输入或点击搜索按钮时的行为。
2. HTML结构：搜索界面与数据表格
首先，我们需要构建基础的HTML骨架，包括一个输入框用于用户输入搜索关键词，一个搜索按钮来触发搜索，以及一个表格来展示数据。
可搜索的API数据表格 /* 简单的样式，可根据需要自行美化 */ body { font-family: Arial, sans-serif; margin: 20px; } input[type="text"], input[type="submit"] { padding: 8px; margin-bottom: 10px; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; }
| 国家 | 新增确诊 | 累计确诊 | 新增死亡 | 累计死亡 | 新增恢复 | 累计恢复 | 最后更新日期 |
|---|
注意： 确保输入框 (myInput)、搜索按钮 (mySubmit) 和表格主体 (tbody) 都具有唯一的 id 属性，以便JavaScript能够准确地获取并操作它们。
立即学习“Java免费学习笔记（深入）”；
3. JavaScript实现：数据获取与全局存储
为了实现搜索功能，我们需要在首次从API获取数据后，将其存储在一个全局可访问的变量中。这样，每次用户进行搜索时，我们就不需要重新请求API，而是直接对已有的数据进行过滤。
// script.jslet countriesData = []; // 全局变量，用于存储从API获取的所有国家数据/** * 从API获取数据并初始化全局变量 */const getdata = async () => { const endpoint = "https://api.covid19api.com/summary"; try { const response = await fetch(endpoint); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); // 将获取到的国家数据存储到全局变量 countriesData = data.Countries; // 数据加载完成后，立即显示所有国家数据 _DisplayCountries(); } catch (error) { console.error("获取数据失败:", error); // 可以在这里添加错误提示给用户 }};// 在页面加载完成后调用数据获取函数getdata();
在上述代码中：
countriesData 被声明为一个全局数组，用于保存所有国家的数据对象。getdata 是一个异步函数，负责使用 fetch API从指定端点获取数据。数据成功获取后，data.Countries 会被赋值给 countriesData。_DisplayCountries() 函数在数据加载完成后立即调用，以显示所有国家的数据。
4. 数据展示与搜索逻辑
接下来，我们创建一个函数来负责数据的过滤和表格的渲染。这个函数将接受一个可选的搜索关键词作为参数。
// script.js (接上一段代码)/** * 根据搜索关键词过滤并显示国家数据 * @param {string} searchTerm - 用户输入的搜索关键词，默认为空字符串表示显示所有数据 */const _DisplayCountries = (searchTerm = "") => { const tbody = document.querySelector("#tbody"); tbody.innerHTML = ``; // 清空现有表格内容 // 使用filter方法根据搜索关键词筛选数据 const filteredCountries = countriesData.filter(country => country.Country.toLowerCase().includes(searchTerm.toLowerCase()) ); // 遍历筛选后的数据，并将其添加到表格中 filteredCountries.forEach(result => { tbody.innerHTML += ` ${result.Country} ${result.NewConfirmed} ${result.TotalConfirmed} ${result.NewDeaths} ${result.TotalDeaths} ${result.NewRecovered} ${result.TotalRecovered} ${result.Date} `; }); // 如果没有搜索结果，可以显示提示信息 if (filteredCountries.length === 0 && searchTerm !== "") { tbody.innerHTML = `没有找到匹配 "${searchTerm}" 的国家。
_DisplayCountries 函数的实现细节：
它接收一个 searchTerm 参数，默认为空字符串。当 searchTerm 为空时，将显示所有数据。tbody.innerHTML = “ 清空了表格现有的所有行，确保每次渲染都是全新的结果。countriesData.filter(…) 是核心搜索逻辑。它会遍历 countriesData 数组中的每个国家对象：country.Country.toLowerCase() 将国家名称转换为小写。searchTerm.toLowerCase() 将搜索关键词也转换为小写。includes() 方法检查国家名称是否包含搜索关键词，从而实现大小写不敏感的模糊匹配。forEach 循环用于遍历过滤后的 filteredCountries 数组，并为每个国家动态创建一行表格数据。添加了当没有搜索结果时的用户提示。
5. 事件监听与搜索触发
最后一步是为搜索按钮添加事件监听器，当用户点击按钮时，获取输入框中的值并调用 _DisplayCountries 函数来更新表格。
// script.js (接上一段代码)// 为搜索按钮添加点击事件监听器document.querySelector("#mySubmit").addEventListener("click", () => { const searchInput = document.querySelector("#myInput").value; _DisplayCountries(searchInput); // 将搜索框的值作为参数传递给显示函数});// 也可以为输入框添加 'keyup' 事件，实现实时搜索document.querySelector("#myInput").addEventListener("keyup", (event) => { // 只有在用户按下Enter键时才搜索，或者实时搜索 // if (event.key === "Enter") { const searchInput = document.querySelector("#myInput").value; _DisplayCountries(searchInput); // }});
document.querySelector(“#mySubmit”).addEventListener(“click”, …) 监听搜索按钮的点击事件。当点击发生时，它获取 myInput 输入框的当前值，并将其作为参数传递给 _DisplayCountries 函数。为了提供更好的用户体验，您还可以为输入框添加 keyup 事件监听器，实现用户输入时即时搜索的效果。
6. 完整代码示例
将上述HTML和JavaScript代码整合后，您将得到一个功能完整的可搜索数据表格。
HTML (index.html):
可搜索的API数据表格 body { font-family: Arial, sans-serif; margin: 20px; } input[type="text"], input[type="submit"] { padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; } input[type="submit"] { background-color: #007bff; color: white; cursor: pointer; } input[type="submit"]:hover { background-color: #0056b3; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } tr:nth-child(even) { background-color: #f9f9f9; }
| 国家 | 新增确诊 | 累计确诊 | 新增死亡 | 累计死亡 | 新增恢复 | 累计恢复 | 最后更新日期 |
|---|
JavaScript (script.js):
let countriesData = [];const getdata = async () => { const endpoint = "https://api.covid19api.com/summary"; try { const response = await fetch(endpoint); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); countriesData = data.Countries; _DisplayCountries(); // 初始显示所有数据 } catch (error) { console.error("获取数据失败:", error); const tbody = document.querySelector("#tbody"); tbody.innerHTML = `数据加载失败，请稍后再试。 没有找到匹配 "${searchTerm}" 的国家。 ${result.Country} ${result.NewConfirmed} ${result.TotalConfirmed} ${result.NewDeaths} ${result.TotalDeaths} ${result.NewRecovered} ${result.TotalRecovered} ${result.Date} `; });};// 页面加载时获取数据getdata();// 搜索按钮点击事件document.querySelector("#mySubmit").addEventListener("click", () => { const searchInput = document.querySelector("#myInput").value; _DisplayCountries(searchInput);});// 输入框实时搜索事件 (可选)document.querySelector("#myInput").addEventListener("keyup", () => { const searchInput = document.querySelector("#myInput").value; _DisplayCountries(searchInput);});
7. 进阶优化与注意事项
大小写不敏感搜索的替代方案：正则表达式除了使用 toLowerCase() 和 includes()，您还可以使用正则表达式来实现更灵活的搜索模式，例如：
// 在 _DisplayCountries 函数内部const regex = new RegExp(searchTerm, "i"); // "i" 标志表示不区分大小写const filteredCountries = countriesData.filter(country => country.Country.match(regex));
这种方法在需要更复杂的模式匹配时（例如匹配开头、结尾、或使用特定字符集）会更加强大。
性能优化对于非常庞大的数据集（例如数万甚至数十万条记录），每次 innerHTML 的重新赋值可能会导致性能问题。此时可以考虑：
文档片段 (DocumentFragment): 批量构建DOM元素，然后一次性添加到文档中，减少重绘和回流。虚拟滚动 (Virtual Scrolling): 只渲染视口内可见的表格行，对于超大数据集非常有效。节流 (Throttling) / 防抖 (Debouncing): 如果使用 keyup 实时搜索，可以添加节流或防抖功能，避免用户输入过快导致频繁触发搜索，从而优化性能和用户体验。
用户体验
加载状态提示: 在数据从API加载时，显示一个“加载中…”的提示，避免页面空白。无结果提示: 当搜索没有匹配项时，清晰地告知用户。清除搜索: 添加一个清除按钮或在搜索框为空时自动显示所有数据。
错误处理在 getdata 函数中，我们已经添加了基本的 try…catch 块来捕获API请求错误。在实际应用中，您可能需要更详细的错误信息展示给用户。
代码分离与模块化对于更复杂的应用，可以将数据获取、渲染逻辑和事件处理进一步封装到不同的模块或类中，提高代码的可维护性和复用性。
总结
通过本教程，我们学习了如何利用JavaScript的Fetch API获取远程数据，并将其存储在全局变量中。核心搜索功能通过 Array.prototype.filter() 结合 toLowerCase() 和 includes() 方法实现，确保了大小写不敏感的模糊匹配。同时，通过动态更新DOM，实现了用户输入后表格内容的实时刷新。遵循代码分离的原则，将数据获取和数据展示逻辑封装在不同的函数中，有助于提升代码的可读性和可维护性。这些技术是构建交互式前端数据展示应用的基础。
以上就是JavaScript实现API数据搜索与动态表格展示的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1593121.html
微信扫一扫 
支付宝扫一扫 
