Jago JavaScript 3 #3: Menampilkan Data API ke DOM (Bikin Katalog Otomatis)

Di materi ini, kita akan belajar cara mengambil data dari server, melakukan perulangan (looping), dan "menempelkan" data tersebut ke dalam struktur HTML kita secara dinamis.

🧩 Apa yang Akan Dipelajari

Menyiapkan wadah (Container) di HTML.
Mengambil data Array of Objects dari API.
Melakukan perulangan menggunakan forEach.
Teknik Template Literals untuk membuat kartu data (Cards) dengan rapi.

⚙️ Persiapan

Siapkan file index.html sederhana sebagai wadah:

<div class="container">
    <h1>Daftar Pengguna Aktif 👥</h1>
    <button id="load-btn">Muat Data</button>
    <div id="user-list" class="grid-container">
        </div>
</div>

<style>
    .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px; }
    .card { border: 1px solid #ddd; padding: 15px; border-radius: 8px; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); }
    .card h3 { margin-top: 0; color: #007bff; }
</style>

🚀 Langkah-Langkah

1. Menyiapkan Fungsi Fetch

Kita pakai API gratis dari jsonplaceholder yang isinya daftar user.

async function ambilDanTampilkanUser() {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const users = await response.json();
    
    // Panggil fungsi untuk nempelin ke DOM
    renderUser(users);
}

2. Teknik Rendering (Memasukkan ke DOM)

Daripada pakai createElement satu-satu (yang bakal panjang banget kodenya), kita pakai teknik Template Literals di dalam forEach.

function renderUser(users) {
    const container = document.getElementById('user-list');
    
    // Kosongkan container dulu kalau ada isinya
    container.innerHTML = "";

    users.forEach(user => {
        // Bikin struktur kartu (Card)
        const card = `
            <div class="card">
                <h3>${user.name}</h3>
                <p>📧 ${user.email}</p>
                <p>🏢 ${user.company.name}</p>
                <small>📍 ${user.address.city}</small>
            </div>
        `;
        
        // Tempelkan ke dalam container
        container.innerHTML += card;
    });
}

3. Menghubungkan dengan Tombol

Biar seru, kita jalankan fungsinya saat tombol diklik.

const btn = document.getElementById('load-btn');
btn.addEventListener('click', ambilDanTampilkanUser);

4. Menambahkan Efek "Loading"

User gak suka nunggu tanpa kepastian. Kita kasih teks loading sederhana.

async function ambilDanTampilkanUser() {
    const container = document.getElementById('user-list');
    container.innerHTML = "<p>Sedang mengambil data... ⏳</p>";
    
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        const users = await response.json();
        renderUser(users);
    } catch (error) {
        container.innerHTML = "<p>Waduh, gagal ambil data! ❌</p>";
    }
}

💡 Tips Tambahan

innerHTML +=: Cara ini praktis, tapi kalau datanya ribuan, performanya bisa lambat. Untuk data kecil-menengah, cara ini paling asik buat pemula.
Destructuring: Biar kode makin bersih, kamu bisa bongkar objek user di dalam loop: users.forEach(({ name, email, company, address }) => { ... });.
Placeholder: Gunakan gambar placeholder (seperti dari ui-avatars.com) kalau API kamu gak nyediain foto profil.

❗ Troubleshooting

Masalah: Kenapa datanya muncul dobel setiap kali tombol diklik? Solusi: Kamu lupa melakukan container.innerHTML = ""; di awal fungsi render. Tanpa itu, JavaScript bakal terus nambahin data baru di bawah data lama.

🎯 Kesimpulan

Kamu sudah berhasil membuat aplikasi "Katalog Otomatis"! Kamu ambil data dari server, olah di JavaScript, dan tampilkan dengan desain yang rapi di HTML. Ini adalah fondasi utama kalau kamu mau bikin aplikasi e-commerce, portal berita, atau dashboard data.