本教學示範如何使用 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中文網其他相關文章！
