Beginner · Level 4: JavaScript FundamentalsBeginner45 menitBahasa Indonesia

Fetch dan JSON Dasar

Belajar mengambil data contoh dengan fetch, membaca JSON, dan menampilkannya di halaman.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Memahami fetch sebagai cara meminta data
Mengenali JSON sebagai format data yang sering dikirim API
Menampilkan data hasil fetch ke DOM

JavaScriptFetchJSONDOM

Isi lesson

6 blok

1.
Banyak UI memakai data dari luar halamanBelum selesaiWajib
2.
JSON adalah bentuk data yang bisa dibaca JavaScriptBelum selesaiWajib
3.
Fetch data lalu render listBelum selesaiWajib
4.
Mulai dari alur sukses duluBelum selesaiWajib
5.
Coding practiceBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Banyak UI memakai data dari luar halaman

Wajib

Di aplikasi web, data tidak selalu sudah ada di HTML. Daftar lesson, profil user, atau hasil pencarian sering diminta dari API. Untuk pemula, cukup pahami alur besarnya: fetch meminta data, response.json membaca isi JSON, lalu JavaScript menampilkan data itu ke DOM.

Bagian ini memengaruhi progres lesson.

JSON adalah bentuk data yang bisa dibaca JavaScript

Wajib

JSON terlihat mirip object dan array JavaScript, tetapi dikirim sebagai teks. Setelah response.json selesai, JavaScript mendapatkan data yang bisa dipakai seperti array atau object biasa. Di lesson ini, data fetch tetap memakai sample aman di browser, bukan API eksternal.

Bagian ini memengaruhi progres lesson.

Fetch data lalu render list

Wajib

fetch(sampleDataUrl)
  .then((response) => response.json())
  .then((lessons) => {
    lessons.forEach((lesson) => {
      const item = document.createElement("li");
      item.textContent = lesson.title;
      lessonList.append(item);
    });
  });

fetch meminta data. response.json mengubah response menjadi data JavaScript. forEach membaca setiap lesson, membuat elemen li, lalu menambahkannya ke list.

Bagian ini memengaruhi progres lesson.

Tips

Wajib

Mulai dari alur sukses dulu

Fetch punya banyak detail seperti loading, error, timeout, dan status code. Di module ini kamu cukup mengenali alur dasar yang berhasil. Error handling yang lebih rapi akan dibahas lagi di JavaScript Advanced.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Fetch JSON lalu render list

Latihan mengambil data contoh, membaca JSON, dan menampilkan list ke DOM.

Tujuan awal: Fokus di tab JS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

7 cek otomatis3 checklist

Belum selesaiBuka practice

Ringkasan

Wajib

fetch dipakai untuk meminta data.
response.json membaca data JSON dari response.
Data hasil fetch bisa dirender ke DOM dengan loop.
Uji Kompetensi berikutnya akan menggabungkan DOM, event, form, localStorage, fetch, dan JSON dasar.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Banyak UI memakai data dari luar halaman.

Memuat progres Review module