本教程旨在指导如何使用javascript从api获取数据，并在网页表格中动态展示。核心内容包括数据全局存储、利用`array.prototype.filter()`方法实现高效的数据搜索功能，并根据用户输入实时更新表格内容，同时强调代码结构优化和大小写不敏感的搜索实现。
在现代前端应用中，从API获取数据并以交互式表格的形式呈现是常见的需求。当数据量较大时，用户需要一个搜索功能来快速定位所需信息。本文将详细介绍如何利用JavaScript实现这一功能，包括数据获取、全局存储、动态表格渲染以及基于用户输入的实时搜索过滤。
1. 核心技术栈概述
实现这一功能主要依赖以下JavaScript核心技术：
- Fetch API: 用于异步获取远程API数据。
- DOM 操作: 用于动态创建、修改和更新网页元素，特别是表格行。
- Array.prototype.filter(): 数组的高阶函数，用于根据指定条件筛选数组元素，是实现搜索功能的核心。
- 事件监听器: 用于捕获用户在搜索框输入或点击搜索按钮时的行为。
2. HTML结构：搜索界面与数据表格
首先，我们需要构建基础的HTML骨架，包括一个输入框用于用户输入搜索关键词，一个搜索按钮来触发搜索，以及一个表格来展示数据。
可搜索的API数据表格
| 国家 | 新增确诊 | 累计确诊 | 新增死亡 | 累计死亡 | 新增恢复 | 累计恢复 | 最后更新日期 |
|---|
注意： 确保输入框 (myInput)、搜索按钮 (mySubmit) 和表格主体 (tbody) 都具有唯一的 id 属性，以便JavaScript能够准确地获取并操作它们。
立即学习“Java免费学习笔记（深入）”；
3. JavaScript实现：数据获取与全局存储
为了实现搜索功能，我们需要在首次从API获取数据后，将其存储在一个全局可访问的变量中。这样，每次用户进行搜索时，我们就不需要重新请求API，而是直接对已有的数据进行过滤。
// script.js
let 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 函数的实现细节：
本组件封装了Angular1.0版本,组件实现了以下功能： 路由，子路由，轮播，cookie读写，加密，表单提交验证，拦截器，白名单，搜索过滤与排序（等级划分）， 大小写转换，Map数组循环遍历动态修改后台数据等功能。
- 它接收一个 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数据表格
| 国家 | 新增确诊 | 累计确诊 | 新增死亡 | 累计死亡 | 新增恢复 | 累计恢复 | 最后更新日期 |
|---|
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，实现了用户输入后表格内容的实时刷新。遵循代码分离的原则，将数据获取和数据展示逻辑封装在不同的函数中，有助于提升代码的可读性和可维护性。这些技术是构建交互式前端数据展示应用的基础。
