JSON: parse dan stringify

Bahasa perantara data

JSON (JavaScript Object Notation) adalah format teks untuk pertukaran data. API hampir selalu mengirim dan menerima JSON. Bentuknya mirip object JavaScript, tapi lebih ketat aturannya.

{
  "nama": "Rizky",
  "umur": 17,
  "lulus": true,
  "hobi": ["ngoding", "gaming"]
}

Perhatikan: key selalu pakai tanda kutip ganda, tidak boleh ada koma di akhir, dan tidak ada komentar atau function.

stringify: object jadi string

Saat mengirim data ke server atau menyimpan ke localStorage, ubah object jadi string JSON:

let user = { nama: "Rizky", umur: 17 };
let json = JSON.stringify(user);
console.log(json); // '{"nama":"Rizky","umur":17}'
console.log(typeof json); // "string"

Bisa juga dibuat cantik untuk dibaca manusia dengan indentasi:

console.log(JSON.stringify(user, null, 2));
// {
//   "nama": "Rizky",
//   "umur": 17
// }

parse: string jadi object

Saat menerima data dari server, ubah string JSON kembali jadi object yang bisa dipakai:

let data = '{"nama":"Rizky","umur":17}';
let user = JSON.parse(data);
console.log(user.nama); // "Rizky"

Menangani JSON rusak

JSON.parse melempar error kalau stringnya tidak valid. Selalu bungkus dengan try-catch untuk data dari luar:

try {
  let hasil = JSON.parse(inputPengguna);
  console.log("Valid:", hasil);
} catch (e) {
  console.log("JSON tidak valid!");
}

Catatan teknis: JSON.stringify menghilangkan function, undefined, dan Symbol karena JSON tidak mendukungnya. Date diubah jadi string ISO. Untuk object dengan referensi melingkar (a merujuk b, b merujuk a), stringify akan error. Pahami batas ini saat menyimpan state kompleks.

Studi kasus: simpan dan muat pengaturan

JSON menjembatani object JavaScript dan localStorage yang hanya menerima string:

let pengaturan = { tema: "gelap", bahasa: "id", notif: true };

// simpan
localStorage.setItem("pengaturan", JSON.stringify(pengaturan));

// muat (dengan fallback aman)
let mentah = localStorage.getItem("pengaturan");
let dimuat = mentah ? JSON.parse(mentah) : { tema: "terang" };
console.log(dimuat.tema);

// update satu field tanpa menghilangkan yang lain
dimuat.bahasa = "en";
localStorage.setItem("pengaturan", JSON.stringify(dimuat));

Pola muat-ubah-simpan ini standar untuk state client-side. Fallback { tema: "terang" } menangani kasus pertama kali dibuka (belum ada data tersimpan) agar kode tidak error.

Kesimpulan

Dua fungsi, dua arah: stringify untuk mengirim/menyimpan, parse untuk menerima/membaca. JSON adalah jembatan antara JavaScript dan dunia luar: API, database, file konfigurasi.