Tahan Dulu Rendernya, Cara Mengatasi Array Kosong setelah Fetch Javascript

Ditulis oleh JavaScript

Array kosong setelah fetch hampir selalu berarti kode merender sebelum await selesai, atau path data yang dibaca salah. Tahan dulu rendernya, cek isi JSON asli lewat Network dan console.log, lalu perbaiki urutan await dan properti yang diambil.

Penyebab Array Kosong Setelah Fetch

Fetch berjalan asinkron di browser. Kalau map atau forEach dipanggil sebelum Promise selesai, hasilnya tetap array kosong tanpa error yang jelas.

  • Render jalan sebelum await selesai, misalnya lupa await response.json().
  • Salah ambil properti dari hasil JSON, misalnya API mengembalikan { data: [...] } tapi kode membaca langsung hasilnya sebagai array.
  • Response kosong, status error, atau filter terlalu ketat sehingga array tersaring habis.

Tabel Diagnosis Cepat

Pakai tabel ini untuk mempersempit penyebab sebelum mengubah banyak kode.

Kondisi Penyebab Solusi
console.log menunjukkan [] Render sebelum fetch selesai Pindahkan render setelah await
JSON berisi object, bukan array Salah path data Baca json.data dan cek Array.isArray
Data hilang setelah filter Kondisi filter terlalu ketat Log data mentah sebelum filter
Status 404 atau 500 HTTP error Cek response.ok sebelum parsing

BACA JUGA:

Cara Memperbaiki dengan Urutan yang Benar

Ikuti urutan ini supaya tidak menebak-nebak:

  1. Buka tab Network di DevTools, pastikan request berhasil dan response berisi data.
  2. Log JSON asli dengan console.log(json) sebelum diolah.
  3. Perbaiki await dan path data, lalu render ulang setelah data valid.
  4. Validasi hasilnya dengan Array.isArray sebelum map.
// Salah: render terlalu cepat dan path data salah
const res = fetch("/api/produk");
const items = await res.json();
render(items);

// Benar
const res = await fetch("/api/produk");
if (!res.ok) throw new Error("Gagal memuat data");
const json = await res.json();
const items = json.data;
if (Array.isArray(items)) render(items);

Kesalahan paling umum ada di baris pertama contoh salah. fetch tanpa await masih berupa Promise, jadi parsing JSON ikut gagal. Versi benar juga membaca json.data karena banyak API membungkus array di dalam object.

Cara Mencegah Terulang

  • Validasi Array.isArray sebelum map atau forEach.
  • Pakai state loading dan fallback kalau data kosong, misalnya pesan “Belum ada produk”.
  • Cek response.ok dan struktur API sebelum mengubah logika render.

FAQ

Kenapa console.log menampilkan array kosong?

Biasanya kode mencatat state awal sebelum fetch selesai, jadi log data lagi setelah await.

Apakah response.json selalu menghasilkan array?

Tidak, hasilnya mengikuti struktur API dan sering berupa object berisi array.

Kapan harus mengecek dokumentasi API?

Ketika nama properti tidak jelas atau struktur response berubah antar endpoint.

Artikel Terkait