JavaScript实现动态API数据搜索与表格动态展示教程-html教程-PHP中文网

JavaScript实现动态API数据搜索与表格动态展示教程

本教程详细讲解如何使用javascript实现前端数据搜索功能。通过从api获取数据并将其存储，我们演示了如何利用`array.prototype.filter()`方法根据用户输入动态筛选数据，并实时更新html表格内容。文章涵盖了数据获取、存储、渲染以及搜索逻辑的实现，并提供了完整的代码示例和优化建议，帮助开发者构建高效的用户界面。

在现代Web应用中，从API获取大量数据并提供用户友好的搜索功能是常见的需求。本教程将指导您如何使用纯JavaScript实现这一功能，包括数据获取、本地存储、动态渲染以及基于用户输入的搜索过滤。

核心思路

实现前端数据搜索功能的核心在于以下几点：

一次性获取并存储所有数据： 避免每次搜索都重新请求API，提高效率。将获取到的完整数据集存储在一个可访问的变量中。
职责分离： 将数据获取、数据渲染和搜索逻辑分离为独立的函数，提高代码的可维护性和复用性。
动态过滤： 利用JavaScript数组的filter()方法，根据用户输入筛选出匹配的数据子集。
动态更新UI： 每次筛选后，清空并重新填充HTML表格，展示过滤后的数据。

HTML结构准备

首先，我们需要一个包含搜索框、搜索按钮和数据展示表格的基础HTML结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API数据搜索示例</title>
    <style>
        body { font-family: sans-serif; margin: 20px; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        input[type="text"], input[type="submit"] { padding: 8px; margin-right: 5px; }
        input[type="submit"] { cursor: pointer; background-color: #007bff; color: white; border: none; border-radius: 4px; }
        input[type="submit"]:hover { background-color: #0056b3; }
    </style>
</head>
<body>

    <input type="text" id="myInput" placeholder=" 搜索国家 ">
    <input type="submit" id="mySubmit" value="搜索" class="submit">

    <table class="table">
        <thead>
            <tr>
                <th scope="col">国家</th>
                <th scope="col">新增确诊</th>
                <th scope="col">累计确诊</th>
                <th scope="col">新增死亡</th>
                <th scope="col">累计死亡</th>
                <th scope="col">新增康复</th>
                <th scope="col">累计康复</th>
                <th scope="col">最后更新日期</th>
            </tr>
        </thead>
        <tbody id="tbody">
            <!-- 数据将在这里动态加载 -->
        </tbody>
    </table>

    <script src="app.js"></script> <!-- 假设JavaScript代码在app.js中 -->

</body>
</html>

登录后复制

数据获取与存储

我们将从一个公共API（例如COVID-19 API）获取国家疫情数据。关键在于将获取到的Countries数组存储在一个全局变量中，以便后续的搜索和过滤操作能够访问到完整的数据集。

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

// app.js

// 用于存储从API获取的完整国家数据
let countriesData = [];

/**
 * 从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();

登录后复制

数据展示函数

为了避免代码重复，我们创建一个专门的函数来负责将数据渲染到HTML表格中。这个函数可以接受一个可选的参数，用于指定要展示的数据子集（例如，搜索结果）。

腾讯智影

腾讯推出的在线智能视频创作平台

341

查看详情

// app.js (接上文)

/**
 * 将国家数据显示到表格中
 * @param {string} searchTerm - 可选的搜索关键词，用于过滤国家名称
 */
const _DisplayCountries = (searchTerm = "") => {
  const tbody = document.querySelector("#tbody");
  tbody.innerHTML = ``; // 清空现有表格内容

  // 根据搜索词过滤数据，如果searchTerm为空，则显示所有数据
  const filteredCountries = countriesData.filter(country =>
    country.Country.toLowerCase().includes(searchTerm.toLowerCase())
  );

  // 遍历过滤后的数据并添加到表格
  filteredCountries.forEach(result => {
    tbody.innerHTML += `
      <tr>
        <td>${result.Country}</td>
        <td>${result.NewConfirmed}</td>
        <td>${result.TotalConfirmed}</td>
        <td>${result.NewDeaths}</td>
        <td>${result.TotalDeaths}</td>
        <td>${result.NewRecovered}</td>
        <td>${result.TotalRecovered}</td>
        <td>${new Date(result.Date).toLocaleString()}</td>
      </tr>
    `;
  });
};

登录后复制

在_DisplayCountries函数中，我们对Date字段进行了格式化，使其更具可读性。

实现搜索逻辑

现在，我们将为搜索按钮添加事件监听器。当用户点击搜索按钮时，我们将获取搜索框中的值，并将其传递给_DisplayCountries函数，从而实现数据的过滤和更新。

// app.js (接上文)

// 获取搜索按钮和输入框
const searchInput = document.querySelector("#myInput");
const searchButton = document.querySelector("#mySubmit");

// 为搜索按钮添加点击事件监听器
searchButton.addEventListener("click", () => {
  const searchTerm = searchInput.value.trim(); // 获取并去除输入值两端的空白
  _DisplayCountries(searchTerm); // 调用显示函数，传入搜索词
});

// 也可以为输入框添加 'input' 事件监听器，实现实时搜索
searchInput.addEventListener("input", () => {
    const searchTerm = searchInput.value.trim();
    _DisplayCountries(searchTerm);
});

登录后复制

这里我们同时为搜索按钮的click事件和搜索输入框的input事件添加了监听器。这意味着用户可以点击按钮进行搜索，也可以在输入时实时看到结果更新，这通常能提供更好的用户体验。

完整代码示例

将上述所有JavaScript代码整合到一个文件中（例如app.js），并确保HTML文件正确引用它。

// app.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 _DisplayCountries = (searchTerm = "") => {
  const tbody = document.querySelector("#tbody");
  tbody.innerHTML = ``;

  const filteredCountries = countriesData.filter(country =>
    country.Country.toLowerCase().includes(searchTerm.toLowerCase())
  );

  if (filteredCountries.length === 0 && searchTerm !== "") {
      tbody.innerHTML = `<tr><td colspan="8" style="text-align: center;">没有找到匹配 "${searchTerm}" 的国家。</td></tr>`;
      return;
  }

  filteredCountries.forEach(result => {
    tbody.innerHTML += `
      <tr>
        <td>${result.Country}</td>
        <td>${result.NewConfirmed}</td>
        <td>${result.TotalConfirmed}</td>
        <td>${result.NewDeaths}</td>
        <td>${result.TotalDeaths}</td>
        <td>${result.NewRecovered}</td>
        <td>${result.TotalRecovered}</td>
        <td>${new Date(result.Date).toLocaleString()}</td>
      </tr>
    `;
  });
};

getdata();

const searchInput = document.querySelector("#myInput");
const searchButton = document.querySelector("#mySubmit");

searchButton.addEventListener("click", () => {
  const searchTerm = searchInput.value.trim();
  _DisplayCountries(searchTerm);
});

searchInput.addEventListener("input", () => {
    const searchTerm = searchInput.value.trim();
    _DisplayCountries(searchTerm);
});

登录后复制

优化与注意事项

大小写不敏感搜索： 在上述代码中，我们使用了toLowerCase()方法将国家名称和搜索词都转换为小写，确保搜索是大小写不敏感的，提高了用户体验。
替代搜索方法： String.prototype.includes()是一个简单有效的匹配方法。对于更复杂的搜索模式（例如，只匹配开头、精确匹配等），可以使用正则表达式：
```
// 使用正则表达式进行搜索
// let regex = new RegExp(searchTerm, "i"); // "i" 标志表示不区分大小写
// countriesData.filter(country => country.Country.match(regex))
```
登录后复制
用户体验：
- 实时搜索： 为input元素添加input事件监听器，可以实现在用户输入时即时更新搜索结果，提供更流畅的体验。
- 空搜索结果提示： 当搜索结果为空时，可以在表格中显示一条友好的提示信息，而不是空白表格。
性能考量：
- 对于小型到中型数据集（几千到几万条），客户端JavaScript的filter()方法通常足够高效。
- 对于非常庞大的数据集（数十万甚至更多），客户端过滤可能会导致性能瓶颈。在这种情况下，考虑将搜索逻辑放在服务器端实现（即每次搜索都向API发送带有搜索参数的请求），由服务器返回过滤后的数据。
错误处理： 在getdata函数中增加了try...catch块来捕获API请求可能发生的错误，并打印到控制台。在实际应用中，您可能需要向用户显示更友好的错误消息。