JavaScript JSON: Parse, Stringify en Best Practices

JSON in JavaScript

JavaScript heeft native ondersteuning voor JSON via het globale JSON-object met twee belangrijke methoden: JSON.parse() en JSON.stringify().

JSON.parse() - JSON-strings parsen

Converteer een JSON-string naar een JavaScript-object:

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

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

Arrays parsen

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

JSON.stringify() - Converteren naar JSON

Converteer een JavaScript-object naar een JSON-string:

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

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

Formatteren (Pretty Print)

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

Replacer- en Reviver-functies

Replacer - Eigenschappen filteren

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

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

Reviver - Waarden transformeren

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

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

Foutafhandeling

try {
  const data = JSON.parse(ongeldigeJson);
} catch (error) {
  console.error("Ongeldige JSON:", error.message);
}

Werken met de Fetch API

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

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

LocalStorage met JSON

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

// Laden
const opgeslagen = localStorage.getItem('user');
const gebruikerObj = JSON.parse(opgeslagen);

Veelvoorkomende valkuilen

Circulaire referenties

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

// ❌ Gooit een fout
JSON.stringify(obj);

Functies worden genegeerd

JSON.stringify({ fn: () => {} });
// {} - functies worden weggelaten

Best Practices

Gebruik altijd try-catch bij JSON.parse().

Valideer de JSON vóór het parsen.

Gebruik een 'replacer' voor gevoelige gegevens.

Ga op de juiste manier om met undefined/null.

Wees je bewust van de beperkingen van datatypen.

Conclusie

Beheers JSON.parse() en JSON.stringify() voor al je JavaScript-JSON-behoeften. Vergeet niet om fouten af te handelen en de beperkingen te begrijpen!