Wat is JSON?

JSON staat voor JavaScript Object Notation. Het is een tekstformaat om data op te slaan en uit te wisselen tussen systemen.

JSON wordt veel gebruikt wanneer data wordt verstuurd van een server naar een webpagina, bijvoorbeeld bij API's.

JSON versus JavaScript object

JSON JavaScript object
Formaat voor gegevensuitwisseling Datastructuur in code
Voor opslag en transport Voor structureren en manipuleren
Statisch (string) Dynamisch (kan veranderen)
Taalonafhankelijk Afhankelijk van programmeertaal
Een JSON bestand is meestal een array met meerdere objecten over één onderwerp.

Array met objecten

Voor je met JSON bestanden werkt, is het handig om eerst te weten hoe je een array met objecten doorloopt.

Array met auto's

let cars = [
  {
    name: 'Fiat',
    model: '500',
    weight: '850kg',
    color: 'White',
  },
  {
    name: 'Volvo',
    model: 'S60',
    weight: '1200kg',
    color: 'Grey',
  },
  {
    name: 'BMW',
    model: 'X7',
    weight: '1350kg',
    color: 'Black',
  },
];

Door de array loopen

for (let car of cars) {
  console.log(car.name); // Fiat, Volvo, BMW
}
  • Elke auto komt tijdelijk in de variabele car
  • Je kunt car.name, car.model en andere properties gebruiken

Data op het scherm tonen

<section class="cars"></section>
let output = document.querySelector('.cars');
let out = '';

for (let car of cars) {
  out += `
    <div>
      <h2>${car.name}</h2>
      <p>Model: ${car.model}</p>
      <p>Gewicht: ${car.weight}</p>
      <p>Kleur: ${car.color}</p>
    </div>
  `;
}

output.innerHTML = out;
  • out start als lege string en wordt in de loop opgebouwd
  • out += voegt steeds een stukje HTML toe
  • output.innerHTML = out staat buiten de loop

JSON bestand maken

Nu gaan we dezelfde data in een JSON bestand zetten, zodat je het met fetch() kunt inladen.

cars.json

Maak een bestand cars.json en zet hier dit in:

[
  {
    "name": "Fiat",
    "model": "500",
    "weight": "850kg",
    "color": "White"
  },
  {
    "name": "Volvo",
    "model": "S60",
    "weight": "1200kg",
    "color": "Grey"
  },
  {
    "name": "BMW",
    "model": "X7",
    "weight": "1350kg",
    "color": "Black"
  }
]
JSON regels:
  • Begin met [ en eindig met ] (het is een array)
  • Properties en waarden altijd met dubbele aanhalingstekens
  • Geen komma na het laatste object
  • Geen comments in JSON

JavaScript versus JSON

JavaScript object JSON
name: 'Fiat' "name": "Fiat"
Enkele of dubbele quotes Alleen dubbele quotes
Comments mogelijk Geen comments
Trailing comma's mogelijk Geen trailing comma's

Data ophalen met fetch()

Data uit een JSON bestand inladen met fetch() bestaat uit drie stappen.

  1. Bestand ophalen met fetch()
  2. Response omzetten naar JSON
  3. Door de data loopen en tonen

Voorbereiding in JavaScript

let output = document.querySelector('.cars');
let out = '';

Basis fetch keten

fetch('./cars.json')
  .then(response => response.json())
  .then(cars => {
    console.log(cars);
  });
  • fetch geeft een promise terug
  • response.json() zet ruwe data om naar een array met objecten

Data tonen op de pagina

fetch('./cars.json')
  .then(response => response.json())
  .then(cars => {
    for (let car of cars) {
      out += `
        <div>
          <h2>${car.name}</h2>
          <p>Model: ${car.model}</p>
          <p>Gewicht: ${car.weight}</p>
          <p>Kleur: ${car.color}</p>
        </div>
      `;
    }

    output.innerHTML = out;
  });

Met foutafhandeling

fetch('./cars.json')
  .then(response => {
    if (!response.ok) {
      throw new Error('Bestand niet gevonden');
    }
    return response.json();
  })
  .then(cars => {
    for (let car of cars) {
      out += `
        <div>
          <h2>${car.name}</h2>
          <p>Model: ${car.model}</p>
          <p>Gewicht: ${car.weight}</p>
          <p>Kleur: ${car.color}</p>
        </div>
      `;
    }
    output.innerHTML = out;
  })
  .catch(error => {
    console.log('Er ging iets mis:', error);
    output.innerHTML = '<p>Data kon niet geladen worden.</p>';
  });

Bestandspaden

// Zelfde map
fetch('./cars.json');
fetch('cars.json');

// Een map omhoog, dan data map
fetch('../data/cars.json');

// Vanaf de root
fetch('/data/cars.json');

Veelgemaakte fouten met JSON

1. Verkeerde aanhalingstekens

// Fout
{
  name: "Fiat",
  'model': '500'
}

// Goed
{
  "name": "Fiat",
  "model": "500"
}

2. Komma na laatste element

// Fout
[
  { "name": "Fiat" },
  { "name": "Volvo" },
]

// Goed
[
  { "name": "Fiat" },
  { "name": "Volvo" }
]

3. Verkeerd pad bij fetch()

fetch('./cars.json');       // zelfde map
fetch('../data/cars.json'); // map omhoog, dan data
fetch('cars.json');         // ook zelfde map

4. innerHTML in de loop

// Fout: overschrijft elke keer
for (let car of cars) {
  output.innerHTML = `<div>${car.name}</div>`;
}

// Goed: eerst string opbouwen
let out = '';
for (let car of cars) {
  out += `<div>${car.name}</div>`;
}
output.innerHTML = out;
Debug tip: log altijd eerst de data. 
fetch('./cars.json')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

Tips voor werken met JSON

JSON controleren

Gebruik een JSON validator om fouten te vinden

Veel loggen

Gebruik console.log om te zien welke data je krijgt

Namen gelijk houden

Gebruik in JSON en JavaScript dezelfde property namen

Kleine bestanden

Begin met een paar objecten om te testen

Error handling

Gebruik altijd .catch bij fetch

Leesbare structuur

Gebruik nette inspringing zodat je JSON goed leesbaar is

Stappenplan fetch()

fetch('./bestand.json')         // 1. Haal bestand op
  .then(response => response.json()) // 2. Zet om naar JSON
  .then(data => {                    // 3. Werk met de data
    console.log(data);
  })
  .catch(error => {                  // 4. Vang errors op
    console.error(error);
  });
Met deze stappen kun je JSON bestanden maken, inladen met fetch(), data tonen op je pagina en fouten debuggen.