Advance · Pertemuan 3 · Format JSON & API Fetch · Pelajaran 5 dari 5

Latihan: Ambil Data dari API

Ambil satu data todo dari API publik lalu tampilkan. Klik tombolnya (butuh koneksi internet).

async function ambilTodo() {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const data = await res.json();
  document.getElementById("apiOut").textContent =
    "#" + data.id + " — " + data.title;
}

Coba langsung

(hasil dari API muncul di sini)
async function ambilTodo() {
  const out = document.getElementById("apiOut");
  out.textContent = "Mengambil data…";
  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await res.json();
    out.textContent = "#" + data.id + " — " + data.title;
  } catch (e) {
    out.textContent = "Gagal mengambil data (cek koneksi).";
  }
}
Selamat! Kamu sudah menuntaskan seluruh kelas — Dasar (HTML, CSS, JS) dan Advance (Function, DOM & Event, JSON & API). Waktunya membuat proyek kecilmu sendiri!