JavaScript JSON: Parse, Stringify, dan Praktik Terbaik

JSON dalam JavaScript

JavaScript memiliki dukungan JSON native melalui objek global JSON dengan dua metode utama: JSON.parse() dan JSON.stringify().

JSON.parse() - Menguraikan String JSON

Mengonversi string JSON menjadi objek JavaScript:

const jsonString = '{"name": "Alice", "age": 30}';
const obj = JSON.parse(jsonString);

console.log(obj.name);  // "Alice"
console.log(obj.age);   // 30

Menguraikan Array

const arrayString = '[1, 2, 3, 4, 5]';
const numbers = JSON.parse(arrayString);
console.log(numbers[0]);  // 1

JSON.stringify() - Mengonversi ke JSON

Mengonversi objek JavaScript menjadi string JSON:

const user = {
  name: "Bob",
  age: 25,
  active: true
};

const json = JSON.stringify(user);
console.log(json);
// {"name":"Bob","age":25,"active":true}

Pretty Printing (Pemformatan Rapi)

const formatted = JSON.stringify(user, null, 2);
console.log(formatted);
// {
//   "name": "Bob",
//   "age": 25,
//   "active": true
// }

Fungsi Replacer dan Reviver

Replacer - Memfilter Properti

const data = {
  name: "Alice",
  password: "rahasia",
  age: 30
};

const json = JSON.stringify(data, (key, value) => {
  if (key === "password") return undefined;
  return value;
});
// {"name":"Alice","age":30}

Reviver - Mentransformasi Nilai

const json = '{"date":"2024-01-01T00:00:00Z"}';

const obj = JSON.parse(json, (key, value) => {
  if (key === "date") return new Date(value);
  return value;
});

Penanganan Kesalahan (Error Handling)

try {
  const data = JSON.parse(invalidJson);
} catch (error) {
  console.error("JSON tidak valid:", error.message);
}

Bekerja dengan Fetch API

// Permintaan GET
fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => console.log(data));

// Permintaan POST
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Alice' })
});

LocalStorage dengan JSON

// Simpan
const user = { name: "Alice", age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// Ambil
const stored = localStorage.getItem('user');
const user = JSON.parse(stored);

Jebakan Umum (Common Pitfalls)

Referensi Melingkar (Circular References)

const obj = {};
obj.self = obj;

// ❌ Melemparkan kesalahan (error)
JSON.stringify(obj);

Nilai Undefined

JSON.stringify({ a: undefined, b: 2 });
// {"b":2} - undefined diabaikan

Fungsi Diabaikan

JSON.stringify({ fn: () => {} });
// {} - fungsi diabaikan

Praktik Terbaik

Selalu gunakan try-catch dengan JSON.parse()

Validasi JSON sebelum diuraikan

Gunakan replacer untuk data sensitif

Tangani undefined/null dengan tepat

Sadari batasan tipe data

Kesimpulan

Kuasai JSON.parse() dan JSON.stringify() untuk semua kebutuhan JSON JavaScript Anda. Ingatlah untuk menangani kesalahan dan pahami batasannya!