Cara Mengisi HTML Secara Dinamik dengan Data daripada API

Tutorial ini menunjukkan cara untuk mengambil dan memaparkan data daripada API watak Harry Potter menggunakan kaedah fetch() JavaScript. Kami akan membina halaman web yang diisi secara dinamik dengan maklumat watak.

Pertama, kami menyasarkan elemen HTML di mana data aksara akan dipaparkan:

<code class="language-javascript">const charsSection = document.getElementById('chars-container');</code>

Seterusnya, kami mentakrifkan URL API dan fungsi tak segerak untuk mendapatkan dan menapis data:

<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>

Fungsi getChars() mengambil data, menukarnya kepada JSON dan menapis hasil untuk memasukkan hanya aksara manusia dengan imej yang berkaitan. Penapisan ini menangani kemungkinan ketidaklengkapan API.

Halaman web diisi menggunakan fungsi tak segerak ini:

<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>

Fungsi buildPage() ini berulang melalui data watak yang ditapis dan mencipta elemen HTML (kad aksara) secara dinamik untuk memaparkan imej watak, nama, keturunan, rumah Hogwarts dan pelakon/pelakon. innerHTML daripada charsSection dikemas kini untuk memaparkan kad ini. Kerana getChars() adalah tak segerak, buildPage() mestilah tak segerak dan await hasil daripada getChars().

Imej berikut menunjukkan sampel halaman web yang diisi. Butiran penggayaan ditinggalkan untuk ringkas, tetapi kod projek lengkap tersedia di [pautan ke projek].

Contoh ini mempamerkan populasi halaman web dinamik menggunakan data API. Maklum balas dan perkongsian adalah dihargai!

Pautan

Projek dalam tindakan

Repositori projek

Dokumen Web MDN ‘Pengenalan kepada API Web’

Pada asalnya diterbitkan ke Medium untuk JavaScript dalam Bahasa Inggeris Biasa pada 14 November 2022

Atas ialah kandungan terperinci Cara Mengisi HTML Secara Dinamik dengan Data daripada API. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!