Panduan Praktis Cara Mengatasi Fetch Data Tidak Tampil Javascript untuk Frontend

Ditulis oleh JavaScript

Data tidak tampil setelah fetch biasanya bukan karena fetch gagal total, melainkan kode jalan sebelum Promise selesai atau properti yang dirender tidak cocok dengan isi JSON. Periksa tab Network, lalu console.log hasil response.json() sebelum menyentuh DOM. Kebanyakan kasus selesai setelah urutan await fetch, cek status, dan akses properti diperbaiki.

Penyebab Fetch Data Tidak Tampil Paling Sering

Fetch di browser hanya reject saat network error. Status 404 atau 500 tetap dianggap resolve sehingga layar tetap kosong tanpa pesan bila tidak diperiksa.

  • Network error: server tidak terjangkau, URL salah, atau koneksi putus.
  • HTTP error: status 404/500 tidak dicek lewat response.ok.
  • JSON salah bentuk: mengakses data.items padahal API mengembalikan array langsung.
  • Render DOM gagal: ID element salah, script jalan sebelum DOM siap, atau lupa await.
  • JSON parse error: response berisi HTML error page, bukan JSON.

Tabel Diagnosis Cepat Berdasarkan Gejala di Browser

Baca Console untuk error JavaScript, Network untuk status dan body response, lalu Elements untuk memastikan target render ada.

Kondisi Penyebab Solusi
Console: Failed to fetch Network error atau URL salah Perbaiki endpoint dan cek koneksi di tab Network
Status 404/500 tapi tidak ada error response.ok tidak diperiksa Hentikan proses bila status tidak OK lalu tampilkan pesan
Unexpected token < in JSON Server mengembalikan HTML Lihat Preview response dan perbaiki URL atau parameter
Data ada di Console, layar kosong Selector DOM salah atau properti undefined Samakan ID element dan bentuk objek API

BACA JUGA:

Langkah Memperbaiki Data Fetch agar Muncul di Layar

Ikuti urutan ini agar sumber masalah terlihat jelas.

1. Pastikan endpoint mengembalikan status 200 dan body JSON di tab Network.
2. Log hasil fetch sebelum render untuk melihat bentuk aslinya.
3. Periksa response.ok karena fetch tidak otomatis reject untuk 404/500.
4. Sesuaikan akses properti dengan struktur API.
5. Pastikan element target sudah ada saat script berjalan.

// Salah: lupa await dan langsung render
const data = fetch("/api/users").then((r) => r.json());
list.textContent = data[0].name;

Kode di atas menyimpan Promise, bukan data. Akses data[0] menghasilkan undefined.

const response = await fetch("/api/users");
if (!response.ok) throw new Error("HTTP " + response.status);
const data = await response.json();
console.log(data);
document.querySelector("#list").textContent = data[0].name;

Versi benar menunggu response selesai, memvalidasi status, mengubah body menjadi objek JavaScript, lalu memakai textContent untuk teks biasa agar lebih aman dari HTML injection.

Pencegahan agar Data Fetch Tidak Hilang Lagi

Validasi bentuk data sebelum render jauh lebih murah daripada menebak kenapa layar kosong.

  • Cek Array.isArray(data) atau keberadaan properti penting sebelum loop.
  • Tampilkan state loading, lalu ganti dengan data atau pesan error.
  • Tangkap network error dan HTTP error secara terpisah.
  • Pastikan script berada di akhir body atau memakai defer.
  • Jangan mengasumsikan semua API mengembalikan objek dengan properti sama.

FAQ

Kenapa fetch sukses tapi data tidak tampil?

Umumnya properti yang diakses tidak sesuai struktur JSON atau element DOM target tidak ditemukan.

Apakah response.json selalu diperlukan?

Ya untuk body JSON karena fetch awalnya hanya mengembalikan objek Response, bukan datanya.

Kapan masalahnya ada di DOM bukan di fetch?

Bila data sudah benar di Console tetapi layar kosong, periksa selector, timing script, dan proses render.

Artikel Terkait