如何使用 API 中的数据动态填充 HTML

从现在开始，我们要努力学习啦！今天我给大家带来《如何使用 API 中的数据动态填充 HTML》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

作为Web开发者（以及所有软件开发者），掌握应用程序编程接口（API）至关重要。简单来说，API是可通过JavaScript的fetch()方法访问的数据集合，这些数据并非本地存储，而是位于另一台服务器上，可在需要时访问全部或部分数据，并在网站或应用的特定部分显示。

本文将演示如何从一个包含哈利·波特角色信息的API获取数据，并在网页上显示。你会发现，数据获取和显示其实是项目中最简单的一部分。言归正传，让我们开始吧！

获取API数据

首先，将HTML文档中用于显示角色信息的容器（字符容器）分配给一个变量：

const charssection = document.getElementById('chars-container');

接下来，将API的URL分配给一个变量（简化代码），并创建一个异步函数（因为需要等待数据检索）：

// API URL
const charsurl = 'https://hp-api.herokuapp.com/api/characters';

// 获取并过滤角色数据的异步函数
async function getChars() {
    const response = await fetch(charsurl);
    const allCharsArr = await response.json();

    let newCharsArr = [];
    for (let i = 0; i < allCharsArr.length; i++) {
        if (allCharsArr[i].image.length > 0 && allCharsArr[i].species === 'human') {
            newCharsArr.push(allCharsArr[i]);
        }
    }
    return newCharsArr;
}

getChars()函数获取API数据，将其转换为JSON，然后将符合条件的数据对象（species属性为'human'且image属性长度大于0）推入newCharsArr数组。

数据过滤的原因有很多，例如API的不完整性。通过循环和条件语句，可以根据项目需求处理不完整的数据。本例中，并非所有角色都包含图片，因此过滤掉缺少图片的数据。

getChars()函数返回一个包含过滤后角色数据的数组。

使用检索到的API数据填充页面

async function buildPage() {
    const newCharsArr = await getChars();
    // 填充角色卡片的HTML
    for (let i = 0; i < newCharsArr.length; i++) {
        charssection.innerHTML +=
            "<div class='char-card'>"
            + "<div class='char-img-container'>"
            + "<i class='far fa-heart'></i>" // 心形图标，需引入字体图标库
            + "<img src='" + newCharsArr[i].image + "' alt='" + newCharsArr[i].name + "'></img>"
            + "</div>"
            + "<h3>" + newCharsArr[i].name + "</h3>"
            + "<p>种族: " + newCharsArr[i].ancestry + "</p>"
            + "<p>学院: " + newCharsArr[i].house + "</p>"
            + "<p>演员: " + newCharsArr[i].actor + "</p>"
            + "</div>";
    }
}

buildPage()函数使用getChars()函数返回的数据填充charssection变量。由于getChars()是异步的，buildPage()也必须是异步的，等待getChars()执行完毕后才能填充内容。

buildPage()函数遍历过滤后的数据数组，动态创建角色卡片，包含角色图片、姓名、种族、学院和演员信息。

下图是提取、过滤角色信息并填充页面后的页面截图（样式未包含在示例中，完整代码请参考项目链接）。

本例展示了如何使用API数据动态填充网页。如有任何疑问或建议，欢迎提出。如果您觉得本文有帮助，欢迎点赞或评论。如果您认为本文对其他人有帮助，请分享给您的朋友们。

感谢阅读！

链接

项目演示

项目代码仓库

MDN Web文档：“Web API 简介”

最初发布于2022年11月14日

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何使用 API 中的数据动态填充 HTML》文章吧，也可关注golang学习网公众号了解相关技术文章。