本教程演示如何使用 JavaScript 的 fetch() 方法从 Harry Potter 角色 API 获取和显示数据。 我们将构建一个动态填充角色信息的网页。
首先，我们定位将显示字符数据的 HTML 元素：
<code class="language-javascript">const charsSection = document.getElementById('chars-container');</code>接下来，我们定义 API URL 和异步函数来检索和过滤数据：
<code class="language-javascript">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;
}</code>getChars() 函数获取数据，将其转换为 JSON，并过滤结果以仅包含具有关联图像的人物角色。 此过滤解决了潜在的 API 不完整性问题。
使用此异步函数填充网页：
<code class="language-javascript">async function buildPage() {
const newCharsArr = await getChars();
for (let i = 0; i < newCharsArr.length; i++) {
// ... (HTML card creation logic here) ...
}
}</code>这个buildPage()函数迭代过滤后的角色数据并动态创建HTML元素（角色卡）来显示角色的图像、姓名、祖先、霍格沃茨学院和男演员/女演员。 innerHTML 的 charsSection 已更新以显示这些卡片。 因为 getChars() 是异步的，所以 buildPage() 也必须是异步的，并且 await 是 getChars() 的结果。
下图显示了填充的网页的示例。 为简洁起见，省略了样式详细信息，但完整的项目代码可在 [项目链接] 中找到。
此示例展示了使用 API 数据的动态网页填充。 感谢反馈和分享！
正在实施的项目
项目仓库
MDN Web 文档“Web API 简介”
最初于 2022 年 11 月 14 日以简单英语发布于 Medium for JavaScript
以上是如何使用 API 中的数据动态填充 HTML的详细内容。更多信息请关注PHP中文网其他相关文章！
