Les 12: Fetch & JSON
Home ›JavaScript-track ›Les 12

🌐 Fetch & JSON

⏱ Geschatte leestijd: 25 minuten · 7 stappen

Dit is de laatste les van de JavaScript-track. Je leert hoe je data ophaalt van externe APIs — de basis van elke moderne webapplicatie. In de Symfony-track ga je zelf JSON-endpoints bouwen die je hiermee kunt aanroepen.

1 Wat is een API?

Een API (Application Programming Interface) is een URL die data teruggeeft in plaats van HTML. Die data is bijna altijd in JSON-formaat. Denk aan het weerbericht, gebruikersgegevens, of productinformatie.

Normale URL

Geeft HTML terug — een volledige webpagina voor de browser om te renderen.

API URL

Geeft JSON terug — puur data die je JavaScript kan lezen en verwerken.

Voorbeeld JSON-response van een API
{
  "id": 1,
  "name": "Leanne Graham",
  "email": "sincere@april.biz",
  "address": {
    "city": "Gwenborough"
  }
}

💡 JSONPlaceholder (jsonplaceholder.typicode.com) is een gratis test-API met nep-gebruikers, -posts en -todos. Perfect om fetch() te oefenen zonder eigen server.

2 fetch() en Promises

Wat betekent dit?

fetch(url) stuurt een HTTP-verzoek en geeft een Promise terug. Een Promise is een object dat in de toekomst een waarde oplevert — het netwerk kost immers tijd. Je koppelt callbacks met .then(). 

// fetch() geeft een Promise terug
// .then() wordt uitgevoerd als de Promise klaar is

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(response => response.json())  // zet de response om naar JSON
  .then(data => {
    console.log(data.name);   // "Leanne Graham"
    console.log(data.email);  // "sincere@april.biz"
  })
  .catch(error => {
    console.error('Fout:', error.message);
  });
1. fetch(url) — stuurt het verzoek
2. .then(res => res.json()) — parseert JSON
3. .then(data => ...) — verwerkt de data

3 JSON begrijpen

JSON (JavaScript Object Notation) is een tekstformaat voor data. Het lijkt sterk op een JavaScript-object, maar het is een string. response.json() converteert die string naar een echt JavaScript-object. 

// JSON als string (van een server):
const jsonTekst = '{"naam":"Sara","leeftijd":21}';

// Omzetten naar JS-object:
const obj = JSON.parse(jsonTekst);
console.log(obj.naam);     // "Sara"
console.log(obj.leeftijd); // 21

// JS-object omzetten naar JSON-string:
const nieuweString = JSON.stringify(obj);
console.log(nieuweString); // '{"naam":"Sara","leeftijd":21}'

// Met fetch() hoef je JSON.parse() zelf niet te doen —
// response.json() doet dat automatisch!

4 async / await

Wat betekent dit?

async/await is een modernere manier om met Promises te werken. In plaats van .then()-ketens schrijf je code die eruitziet als synchrone code — maar achter de schermen werkt het hetzelfde. await "wacht" op de Promise zonder de browser te blokkeren.

Met .then()
fetch(url)
  .then(r => r.json())
  .then(data => {
    toon(data);
  })
  .catch(e => fout(e));
Met async/await
async function laadData() {
  try {
    const r = await fetch(url);
    const data = await r.json();
    toon(data);
  } catch(e) {
    fout(e);
  }
}
laadData();

5 Oefening 1: Haal een todo op

Opdracht:

Haal todo #1 op van JSONPlaceholder en toon de titel en status (voltooid of niet) op de pagina.

✓ fetch('https://jsonplaceholder.typicode.com/todos/1')

✓ Toon data.title in een element

✓ Toon of de todo voltooid is (data.completed)

editor
Live preview

6 Oefening 2: Lijst van posts

Opdracht:

Haal de eerste 5 posts op en maak voor elke post een kaartje in de pagina met de titel en een verkorte body.

✓ fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')

✓ Gebruik forEach of map om de posts te verwerken

✓ Maak voor elke post een element aan met createElement

editor
Live preview

7 Eindopdracht: Gebruikersprofiel

Haal gebruiker #1 op en bouw een profielkaart:

✓ fetch('https://jsonplaceholder.typicode.com/users/1')

✓ Toon naam, e-mail en stad (data.address.city)

✓ Toon een laadindicator terwijl het laden bezig is

✓ Verberg de laadindicator als de data er is

✓ Gebruik async/await met try/catch

editor
Live preview
📄 Volledig voorbeeld: fetch-demo.html 
<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <title>Fetch demo</title>
</head>
<body>
  <h1>Gebruikers</h1>
  <ul id="lijst"></ul>

  <script>
    async function laadGebruikers() {
      try {
        const response = await fetch(
          'https://jsonplaceholder.typicode.com/users?_limit=3'
        );
        const gebruikers = await response.json();

        const lijst = document.getElementById('lijst');
        gebruikers.forEach(gebruiker => {
          const li = document.createElement('li');
          li.textContent = `${gebruiker.name} — ${gebruiker.email}`;
          lijst.appendChild(li);
        });
      } catch (fout) {
        console.error('Kan geen data ophalen:', fout.message);
      }
    }

    laadGebruikers();
  </script>
</body>
</html>
← Les 11 Kies een track →