JSON parsen in JavaScript

JSON parsen in JavaScript is iets wat je als webdeveloper honderden keren zult doen. Gelukkig heeft JavaScript ingebouwde ondersteuning — geen libraries nodig. Maar er zit meer nuance in JSON.parse() en JSON.stringify() dan de docs doen vermoeden. Laten we het goed doornemen.

JSON.parse() — Een String Omzetten naar een Object

JSON.parse() neemt een JSON-geformatteerde string en converteert die naar een JavaScript-waarde. Die waarde is meestal een object of array, maar kan ook een string, number, boolean of null zijn:

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

console.log(user.name);    // "Alice"
console.log(user.age);     // 30
console.log(user.active);  // true
console.log(typeof user);  // "object"

Let op: de invoer moet een string zijn. Een veelgemaakte fout is proberen een waarde te parsen die al een object is — JSON.parse({}) gooit een SyntaxError omdat het object eerst naar "[object Object]" wordt omgezet, wat geen geldige JSON is.

Zet JSON.parse() Altijd in een try/catch

Hier is iets wat niemand je vertelt: JSON.parse() gooit een SyntaxError als de invoer geen geldige JSON is. Als je data parst van een API, gebruikersinvoer of een bestand, moet je die fout altijd afhandelen. Eén malformed response kan je app laten crashen als je dat niet doet:

function safeParseJSON(str) {
  try {
    return { data: JSON.parse(str), error: null };
  } catch (err) {
    return { data: null, error: err.message };
  }
}

const { data, error } = safeParseJSON('{"name": "Alice"}');
if (error) {
  console.error('Invalid JSON:', error);
} else {
  console.log(data.name); // "Alice"
}

// Handles bad input gracefully
const result = safeParseJSON('not json at all');
console.log(result.error); // "Unexpected token 'o', "not json "... is not valid JSON"

Ik gebruik zo'n wrapper in bijna elk project. Het maakt foutafhandeling consistent en voorkomt lelijke onafgevangen uitzonderingen die naar je UI bubbelen.

JSON.stringify() — Een Object Omzetten naar een String

JSON.stringify() doet het omgekeerde: het converteert een JavaScript-waarde naar een JSON-string. Je gebruikt dit bij het sturen van data naar een API, opslaan in localStorage, of schrijven naar een bestand:

const user = {
  name: "Bob",
  age: 25,
  roles: ["admin", "editor"],
  password: "secret123" // we'll handle this later
};

// Basic usage
const jsonString = JSON.stringify(user);
// '{"name":"Bob","age":25,"roles":["admin","editor"],"password":"secret123"}'

// Pretty-printed (great for logs and file output)
const prettyJson = JSON.stringify(user, null, 2);
console.log(prettyJson);
// {
//   "name": "Bob",
//   "age": 25,
//   "roles": ["admin", "editor"],
//   "password": "secret123"
// }

Het derde argument van JSON.stringify() is het inspringniveau. 2 of 4 gebruiken geeft je leesbare uitvoer. De standaard (geen derde argument) geeft je compacte, geminificeerde JSON — beter voor netwerkoverdracht.

Wat stringify() Stilletjes Weggooит

Dit bijt developers regelmatig. JSON.stringify() laat stilletjes bepaalde waarden weg omdat JSON ze niet ondersteunt:

const data = {
  name: "Alice",
  greet: function() { return "hi"; },   // Functions → dropped
  undef: undefined,                      // undefined → dropped
  sym: Symbol("key"),                    // Symbols → dropped
  nan: NaN,                              // NaN → null
  inf: Infinity,                         // Infinity → null
  date: new Date("2024-01-15")           // Dates → ISO string
};

console.log(JSON.stringify(data, null, 2));
// {
//   "name": "Alice",
//   "nan": null,
//   "inf": null,
//   "date": "2024-01-15T00:00:00.000Z"
// }
// greet, undef, sym are GONE

JSON Ophalen van een API — Het Echte Patroon

In de praktijk vindt het meeste JSON-parsen plaats als je data ophaalt van een API. De Fetch API maakt dit eenvoudig — response.json() handelt het parsen voor je af:

async function getUser(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);

    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }

    const user = await response.json(); // parses JSON automatically
    return user;
  } catch (err) {
    console.error('Failed to fetch user:', err);
    return null;
  }
}

const user = await getUser(42);
if (user) {
  console.log(`Hello, ${user.name}!`);
}

response.json() is in essentie JSON.parse(await response.text()). Het gooit ook een fout als de response-body geen geldige JSON is, dus het loont de moeite dat apart op te vangen in productiecode.

Werken met Geneste JSON-data

Diep geneste JSON komt veel voor in echte API's. Hier is hoe je er veilig doorheen navigeert zonder te crashen op ontbrekende keys:

const apiResponse = {
  "user": {
    "profile": {
      "address": {
        "city": "Berlin"
      }
    }
  }
};

// Unsafe — throws if any level is undefined
const city1 = apiResponse.user.profile.address.city; // "Berlin"

// Safe with optional chaining (ES2020+) — returns undefined instead of throwing
const city2 = apiResponse?.user?.profile?.address?.city; // "Berlin"
const zip   = apiResponse?.user?.profile?.address?.zip;  // undefined (not a crash)

// With a fallback using nullish coalescing
const country = apiResponse?.user?.profile?.address?.country ?? "Unknown";

Optional chaining (?.) en nullish coalescing (??) zijn moderne JavaScript-features — beide deel van de ECMAScript-spec sinds 2020 — die het werken met onzekere JSON-structuren veel veiliger maken. Gebruik ze gerust — ze worden ondersteund in alle moderne browsers en Node.js 14+.

De replacer- en reviver-functies

Zowel JSON.stringify() als JSON.parse() accepteren een tweede argument waarmee je de transformatie kunt aanpassen. Die zijn echt handig voor praktische scenario's:

// replacer: filter or transform values during stringify
const user = { name: "Alice", password: "s3cr3t", age: 30 };
const safe = JSON.stringify(user, ["name", "age"]); // only include these keys
// '{"name":"Alice","age":30}'  — password is excluded

// reviver: transform values during parse
const dateJson = '{"name": "Alice", "createdAt": "2024-01-15T09:30:00Z"}';
const parsed = JSON.parse(dateJson, (key, value) => {
  if (key === "createdAt") return new Date(value); // convert string to Date
  return value;
});
console.log(parsed.createdAt instanceof Date); // true
console.log(parsed.createdAt.getFullYear());   // 2024

Het reviver-patroon is met name handig voor het herstellen van Date-objecten na een reis door JSON, omdat JSON geen native date-type heeft.

Handige Tools

Als je met JSON werkt in JavaScript-projecten, besparen deze tools tijd: JSON Formatter om geminificeerde API-responses netjes te printen, JSON Validator om syntaxfouten te controleren, JSON Path om specifieke velden uit grote payloads te queryen, en JSON Escape als je JSON in een string moet insluiten. Voor meer diepgang is de MDN JSON-referentie uitstekend.

Afronding

JSON.parse() en JSON.stringify() zijn de twee functies die je nodig hebt. De belangrijkste gewoonten: zet parse() altijd in try/catch, gebruik optional chaining voor geneste toegang, en weet wat stringify() stilletjes weggooит. Doe die drie dingen goed en je handelt 99% van de echte JSON-scenario's zonder verrassingen af.