API からのデータを HTML に動的に入力する方法

このチュートリアルでは、JavaScript の fetch() メソッドを使用してハリー・ポッターのキャラクター API からデータを取得して表示する方法を説明します。 文字情報が動的に入力される Web ページを構築します。

まず、文字データが表示される 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 の不完全性に対処します。

Web ページは、次の非同期関数を使用して設定されます:

<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() の結果である必要があります。

次の画像は、入力された Web ページのサンプルを示しています。 簡潔にするためにスタイルの詳細は省略されていますが、完全なプロジェクト コードは [プロジェクトへのリンク] で入手できます。

この例では、API データを使用した動的な Web ページの作成を示します。 フィードバックと共有をお待ちしております!

リンク

プロジェクト進行中

プロジェクト リポジトリ

MDN Web ドキュメント「Web API の概要」

元々は、2022 年 11 月 14 日に Plain English で Medium for JavaScript に公開されました

以上がAPI からのデータを HTML に動的に入力する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。