Indeks Ganda Selalu Gagal? Cara Mengatasi Nested Array Undefined Javascript

Ditulis oleh JavaScript

Kode data[0][1] gagal karena JavaScript membaca dari kiri ke kanan. Kalau data[0] nilainya undefined, browser langsung melempar TypeError: Cannot read properties of undefined saat mencoba membaca indeks [1]. Perbaikan paling cepat: pastikan lapisan pertama ada dan lapisan kedua memang array sebelum diakses.

// Salah: error kalau data kosong atau data[0] bukan array
const nilai = data[0][1];

// Benar: cek dulu tiap lapisan
let nilaiAman;
if (Array.isArray(data) && Array.isArray(data[0])) {
  nilaiAman = data[0][1];
}

// Alternatif aman dengan nilai default
const nilaiDefault = data?.[0]?.[1] ?? "kosong";

Kode benar di atas mencegah TypeError. Blok if berguna saat kamu butuh validasi tegas, sedangkan optional chaining cocok untuk akses baca cepat.

Penyebab Nested Array Undefined Paling Sering

Error ini hampir selalu masalah runtime, bukan syntax. Struktur datanya tidak sesuai asumsi kode.

Kondisi Penyebab Solusi
data[0] undefined Array induk kosong Cek data.length sebelum akses
data[0][1] undefined Isi lapisan kedua kurang panjang Cek data[0].length
Cannot read properties of undefined Lapisan pertama bukan array Pakai Array.isArray tiap lapisan
Data API tiba-tiba error Respons kosong lalu langsung diakses ganda Normalisasi respons sebelum render
  • Fetch selesai tapi array masih kosong karena data belum dimuat.
  • Struktur campur, misalnya [1, [2, 3], “teks”], sehingga tidak semua elemen bisa diakses dua level.
  • Typo indeks, seperti mengakses [1] padahal isinya hanya satu elemen.

BACA JUGA:

Cara Memperbaiki Akses Array Bertingkat yang Error

Ikuti urutan ini agar sumber error ketahuan, bukan sekadar disembunyikan.

  1. Cek lapisan pertama: pastikan Array.isArray(data) bernilai true dan data.length > 0.
  2. Cek lapisan kedua: pastikan Array.isArray(data[0]) sebelum membaca data[0][1].
  3. Pakai akses aman: gunakan data?.[0]?.[1] ?? nilaiDefault untuk bacaan opsional.
  • data?.[0] ?? []: aman untuk mengambil baris pertama.
  • data?.[0]?.[1] ?? null: aman untuk mengambil sel tertentu.
  • Array.isArray(data?.[0]): pola paling tegas sebelum loop atau map.

Cara Mencegah Error Terulang

Normalisasi bentuk data tepat setelah diterima. Jangan biarkan komponen render menebak-nebak struktur array.

  • Pastikan tiap baris adalah array, contoh: const rows = data.filter(Array.isArray).
  • Validasi panjang tiap lapisan sebelum map, for, atau akses indeks.
  • Berikan nilai default untuk sel kosong, misalnya [], 0, atau string kosong.
  • Untuk data API, tangani respons kosong, respons objek, dan respons HTML error secara terpisah.

FAQ

Kenapa data[0] ada tapi data[0][1] undefined?

Artinya lapisan kedua ada tetapi indeks 1 belum terisi, biasanya karena panjang array hanya satu atau datanya logic error.

Apakah optional chaining cukup untuk nested array?

Cukup untuk membaca aman, tetapi tidak memperbaiki struktur data yang salah sehingga validasi tetap diperlukan sebelum loop.

Bagaimana cek nested array sebelum di-loop?

Gunakan Array.isArray(data) && Array.isArray(data[0]), lalu pastikan panjang tiap lapisan mencukupi.

Artikel Terkait