Cara Mengatasi Array dari API Bukan Array Javascript agar Map Tetap Aman Dipakai

Ditulis oleh JavaScript

Normalisasi respons jadi array sebelum memanggil .map(). Bungkus hasil fetch dengan Array.isArray() dan fallback ke array kosong, maka aplikasi tidak pecah saat API mengirim objek, null, atau string.

Kenapa Respons API Ternyata Bukan Array

API jarang selalu mengirim array langsung. Kadang datanya dibungkus objek seperti { data: […] }. Kadang backend mengirim null saat data kosong, string JSON yang belum diparse, atau halaman HTML saat endpoint error.

Cetak respons mentah dulu dengan console.log(data), lalu cek dengan Array.isArray(data). Hasilnya menentukan perbaikan berikutnya.

  • TypeError: data.map is not a function berarti nilainya memang bukan array, misalnya objek atau null.
  • Data kosong tanpa error berarti nilainya array kosong, jadi .map() aman tapi tidak merender apa pun.
  • Browser tetap butuh pengecekan karena fetch hanya reject untuk network error, bukan untuk status HTTP 404 atau 500.

Tabel Cek Cepat Bentuk Respons API

Periksa response.ok dulu, lalu lihat struktur JSON sebelum dipakai untuk render.

Kondisi Penyebab Solusi
null Data kosong dari backend Ganti jadi []
Objek berisi array Data dibungkus properti data Ambil data.data
String JSON Belum diparse Gunakan response.json()
HTML error Endpoint salah atau server error Cek response.ok dan URL

BACA JUGA:

Cara Memperbaiki agar Bisa Dipakai sebagai Array

Ikuti urutan ini agar aman:

  1. Cek respons dengan Array.isArray().
  2. Jika objek, ambil properti array yang benar, misalnya json.data.
  3. Normalisasi sisanya ke array kosong supaya .map() selalu valid.
// SALAH: langsung map tanpa cek
const data = await response.json();
data.map(item => item.nama);

// BENAR: normalisasi dulu
const response = await fetch("/api/produk");
if (!response.ok) throw new Error("HTTP " + response.status);
const json = await response.json();
const list = Array.isArray(json) ? json : json.data ?? [];
const nama = list.map(item => item.nama);

Baris Array.isArray(json) mempertahankan array langsung. Ekspresi json.data ?? [] mengambil array di dalam objek, lalu fallback ke array kosong bila null atau undefined. Hasil variabel list selalu array, sehingga .map() tidak melempar TypeError.

Cara Mencegah Error Saat Fetch Berikutnya

  • Taruh normalisasi dalam satu fungsi, misalnya normalizeList(json), supaya semua fetch memakai aturan sama.
  • Pisahkan HTTP error dari network error dengan cek response.ok sebelum parse JSON.
  • Tampilkan pesan khusus bila array kosong, misalnya “Belum ada produk”.

FAQ

Kenapa Array.isArray lebih aman dari typeof untuk cek ini?

Karena typeof [] menghasilkan object, sedangkan Array.isArray() memastikan nilainya benar-benar array.

Apa yang dilakukan jika API mengembalikan objek berisi array?

Ambil properti array tersebut, misalnya json.data, lalu normalisasi ke array kosong bila tidak ada.

Kenapa .map tetap error padahal JSON terlihat seperti array?

Kemungkinan respons masih string atau bentuknya sudah berubah menjadi objek atau null, jadi cek ulang dengan Array.isArray().

Artikel Terkait