JavaScript中从API获取并结构化展示数据的教程-js教程-PHP中文网

JavaScript中从API获取并结构化展示数据的教程

碧海醫心

发布： 2025-12-01 09:04:02

原创

480人浏览过

JavaScript中从API获取并结构化展示数据的教程

本教程旨在指导开发者如何利用javascript和axios库从外部api异步获取数据，并将其有效组织和展示。文章将详细讲解如何正确处理api响应，避免常见的`undefined`错误，并通过实例代码演示如何将嵌套数据结构（如分类及其线索）解析并动态渲染到网页上，从而帮助读者掌握数据获取、处理与前端展示的关键技巧。

在现代Web开发中，从外部API获取数据并将其以结构化方式呈现在用户界面上是一项核心任务。本教程将以一个具体的示例，即从jservice.io API获取问答分类及线索数据，来详细讲解这一过程中的关键技术和常见问题解决方案。

准备工作与初始设置

首先，我们需要引入axios库来处理HTTP请求，并定义API的基础URL以及一些常量。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app-container">
  <button onclick="startGame()">开始游戏</button>
  <p id="status"></p>
  <div id="form-fields" style="display:none;">
    <p>
      请输入一个类别编号 (0-5)，以查看其线索。
    </p>
    <input type="number" id="catIdInput" value="0"/>
    <button onclick="displayCategoryClues()">显示线索</button>
  </div>
</div>
<div id="output"></div>

登录后复制

let url = "https://jservice.io/api";
const NUM_CATEGORIES = 6; // 定义要获取的类别数量
let categories = []; // 用于存储获取到的类别数据

// 随机数，用于在获取单个类别时指定ID。
// 注意：实际应用中，为了获取不重复的随机类别，可能需要更复杂的逻辑。
let randomNum = Math.floor(Math.random() * 101);

登录后复制

获取随机类别ID并存储数据

数据获取的第一步是请求API以获取指定数量的随机类别。这里我们定义一个异步函数getCategoryIds来完成这个任务。

/**
 * 从API获取指定数量的随机类别。
 * 每个API响应的data部分包含一个类别对象，我们将其推入categories数组。
 */
async function getCategoryIds() {
    let statusElement = document.getElementById("status");
    let formFieldsElement = document.getElementById("form-fields");

    statusElement.innerText = '正在获取数据，请稍候...';
    console.log('正在获取数据，请稍候...');

    for (let i = 0; i < NUM_CATEGORIES; i++) {
        // 注意：这里每次都使用相同的 randomNum，这会导致重复获取同一个类别。
        // 在实际应用中，应该为每次请求生成一个新的随机ID，或者从一个类别ID列表中随机选择。
        let res = await axios.get(`${url}/category?id=${randomNum + i}`); // 临时修改以获取不同ID
        // 关键点：axios返回的是一个响应对象，实际数据存储在res.data中。
        // 错误的做法是 categories.push(res)，这会导致后续访问数据时出现 res.data.data 的问题。
        categories.push(res.data);
    }

    statusElement.innerText = '数据获取完成！';
    console.log('数据获取完成！', categories);
    formFieldsElement.style.display = 'block'; // 显示输入框和按钮
}

登录后复制

重要提示： 在上述getCategoryIds函数中，一个常见的错误是将整个axios响应对象res推入categories数组，而不是其包含实际数据的res.data。如果categories.push(res)，那么categories数组中的每个元素将是Axios响应对象，其真实数据位于element.data。这会导致尝试访问categories[index].data时，如果categories数组中存储的是res.data，则会得到undefined。正确的做法是categories.push(res.data)，确保categories数组直接包含API返回的类别数据对象。

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

Weights.gg

多功能的AI在线创作与交流平台

3352

查看详情

访问并展示特定类别的线索

一旦categories数组被正确填充，我们就可以编写函数来根据用户输入访问特定类别的线索，并将其动态渲染到页面上。

/**
 * 根据用户选择的类别ID，显示该类别的所有线索（问题和答案）。
 * @param {number} catId - 用户输入的类别索引。
 */
function displayCategoryClues() {
    let catIdInput = document.getElementById("catIdInput");
    let outputElement = document.getElementById("output");
    let selectedCatId = parseInt(catIdInput.value);

    // 验证输入的类别ID是否有效
    if (isNaN(selectedCatId) || selectedCatId < 0 || selectedCatId >= categories.length) {
        outputElement.innerHTML = '<p style="color: red;">请输入一个有效的类别编号 (0-' + (categories.length - 1) + ').</p>';
        return;
    }

    let category = categories[selectedCatId]; // 直接通过索引访问类别对象

    if (!category || !category.clues) {
        outputElement.innerHTML = '<p style="color: red;">所选类别无数据或无线索。</p>';
        return;
    }

    let cluesHtml = `<h2>${category.title}</h2><div>`;
    category.clues.forEach((clue, index) => {
        cluesHtml += `<p><strong>${index + 1}. 问题:</strong> ${clue.question}<br>`;
        cluesHtml += `<strong>答案:</strong> <i>${clue.answer}</i></p>`;
    });
    cluesHtml += '</div>';

    outputElement.innerHTML = cluesHtml;
    console.log('线索已生成并显示。');
}

登录后复制

在displayCategoryClues函数中，我们通过categories[selectedCatId]直接访问到存储在categories数组中的特定类别对象。然后，通过遍历该类别的clues数组，我们可以提取每个问题和答案，并将其格式化为HTML字符串，最终插入到页面的output元素中。

整合与运行

为了让整个流程能够运行，我们需要在HTML中调用这些JavaScript函数。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript API数据获取与展示教程</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #app-container { border: 1px solid #ccc; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
        #output { border: 1px solid #eee; padding: 15px; background-color: #f9f9f9; border-radius: 5px; }
        h2 { color: #333; }
        p strong { color: #555; }
        p i { color: #007bff; }
    </style>
</head>
<body>

    <div id="app-container">
        <h1>Jeopardy风格问答数据展示</h1>
        <button onclick="startGame()">开始获取数据</button>
        <p id="status"></p>
        <div id="form-fields" style="display:none;">
            <p>
                数据已加载。现在，请输入一个类别编号 (0-5) 以查看其线索。<br>
                （例如，输入 `0` 查看第一个类别，输入 `5` 查看第六个类别。）
            </p>
            <input type="number" id="catIdInput" value="0" min="0" max="5"/>
            <button onclick="displayCategoryClues()">显示线索</button>
        </div>
    </div>
    <div id="output"></div>

    <script>
        let url = "https://jservice.io/api";
        const NUM_CATEGORIES = 6;
        let categories = [];
        let randomBaseId = Math.floor(Math.random() * 100) + 1; // 初始随机ID

        async function startGame() {
            document.getElementById("form-fields").style.display = 'none'; // 隐藏输入框直到数据加载
            await getCategoryIds();
        }

        async function getCategoryIds() {
            let statusElement = document.getElementById("status");
            let formFieldsElement = document.getElementById("form-fields");

            statusElement.innerText = '正在获取数据，请稍候...';
            console.log('正在获取数据，请稍候...');
            categories = []; // 每次开始游戏前清空旧数据

            for (let i = 0; i < NUM_CATEGORIES; i++) {
                // 为了获取不同的类别，每次请求时增加ID
                let currentCatId = randomBaseId + i;
                try {
                    let res = await axios.get(`${url}/category?id=${currentCatId}`);
                    if (res.data && res.data.id) { // 确保返回了有效类别数据
                        categories.push(res.data);
                    } else {
                        console.warn(`获取ID为 ${currentCatId} 的类别失败或数据无效。`);
                    }
                } catch (error) {
                    console.error(`请求类别ID ${currentCatId} 发生错误:`, error);
                    statusElement.innerText = `获取数据失败: ${error.message}`;
                    return; // 遇到错误则停止
                }
            }

            statusElement.innerText = '数据获取完成！已加载 ' + categories.length + ' 个类别。';
            console.log('数据获取完成！', categories);
            if (categories.length > 0) {
                document.getElementById("catIdInput").max = categories.length - 1; // 更新输入框的最大值
                formFieldsElement.style.display = 'block'; // 显示输入框和按钮
            } else {
                statusElement.innerText = '未能加载任何类别，请检查API或网络。';
            }
        }

        function displayCategoryClues() {
            let catIdInput = document.getElementById("catIdInput");
            let outputElement = document.getElementById("output");
            let selectedCatId = parseInt(catIdInput.value);

            if (isNaN(selectedCatId) || selectedCatId < 0 || selectedCatId >= categories.length) {
                outputElement.innerHTML = '<p style="color: red;">请输入一个有效的类别编号 (0-' + (categories.length - 1) + ').</p>';
                return;
            }

            let category = categories[selectedCatId];

            if (!category || !category.clues || category.clues.length === 0) {
                outputElement.innerHTML = `<p style="color: red;">类别 "${category ? category.title : '未知'}" 无线索可显示。</p>`;
                return;
            }

            let cluesHtml = `<h2>类别: ${category.title}</h2><div>`;
            category.clues.forEach((clue, index) => {
                cluesHtml += `<p><strong>${index + 1}. 问题:</strong> ${clue.question}<br>`;
                cluesHtml += `<strong>答案:</strong> <i>${clue.answer}</i></p>`;
            });
            cluesHtml += '</div>';

            outputElement.innerHTML = cluesHtml;
            console.log('线索已生成并显示。');
        }
    </script>

</body>
</html>

登录后复制

总结与注意事项

Axios响应结构： 始终记住axios.get()返回的是一个包含data属性的响应对象，实际的API数据存储在res.data中。直接将res推入数组而不提取res.data是导致后续数据访问失败的常见原因。
异步操作： 使用async/await是处理异步HTTP请求的最佳实践，它使代码更易读、更接近同步执行的逻辑。
数据验证与错误处理： 在实际应用中，应增加对API响应的验证，例如检查res.data是否为null或undefined，以及对网络请求失败进行错误捕获。
动态DOM操作： 通过JavaScript动态生成HTML内容并更新DOM是前端交互的关键。注意避免XSS攻击，对于用户输入的内容，应进行适当的净化处理。
API调用频率： 在使用公共API时，请注意其调用频率限制，避免因频繁请求而被封禁IP。
数据结构理解： 在开始编写代码之前，花时间理解API返回的数据结构至关重要。使用浏览器开发者工具（Network Tab）检查API响应，或打印console.log(res.data)来查看其结构。