API’s en JSON

Stel: je bouwt een weer-widget voor je site. Jij hebt geen eigen weerstation, maar je wilt wél actuele data. In plaats van alles zelf te meten, vraag je die gegevens op bij een dienst die het al heeft. Dat is precies wat je met een API doet: jouw website stelt een vraag (request) aan een adres op internet (een endpoint), en krijgt een gestructureerd antwoord (response) terug. Dat antwoord is bijna altijd in JSON.

API

API staat voor Application Programming Interface. Zie het als een loket:

• Jij klopt aan bij een endpoint (een URL).
• Je geeft parameters mee (bijv. locatie, taal, aantallen).
• Je krijgt een response terug met data + een statuscode (200 = gelukt).

Voor onze weer-widget wordt dat zoiets als:

• “API, geef het huidige weer voor Den Haag.”
• “Hier is het: 12 graden, regenachtig.”

Een echt endpoint kan er zo uitzien:

https://api.open-meteo.com/v1/forecast?latitude=52.08&longitude=4.30&current_weather=true

JSON

JSON (JavaScript Object Notation) is een simpel tekstformaat waarin data als sleutel–waarde wordt opgeslagen. Machines kunnen het makkelijk parsen, en mensen kunnen het nog prima lezen.

Voorbeeld:

{
  "current_weather": {
    "time":"2025-09-15T09:15",
    "interval":900,
    "temperature":17.3,
    "windspeed":37.1,
    "winddirection":238,
    "is_day":1,
    "weathercode":0
  }
}

In code kun je deze waarden vervolgens direct gebruiken om je interface te vullen.

Van URL → JSON → UI (het verhaaltje afmaken)

In JavaScript roep je een endpoint aan met fetch. Je zet de response om naar JSON en plaatst de waarden op de pagina. Hiervoor hebben we eerst een stukje HTML nodig.

<p id="weer">Bezig met weer ophalen…</p>

Daarna kunnen we een JS script schrijven om het weer op te halen.

// Ga naar de website om de gegevens op te halen
fetch("https://api.open-meteo.com/v1/forecast?latitude=52.08&longitude=4.30&current_weather=true")
  // Bekijk het resultaat van de website
  .then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`); // Als het niet ok is, dan error
    return res.json(); // het is oke, ga naar volgende then...
  })
  .then(data => {
    // haal temperatuur en weerbeschrijving uit het JSON-object
    const temp = data.current_weather?.temperature; // ? check of current_weather bestaat. 
    const wind = data.current_weather?.windspeed;
    // Pak de tag met id=weer uit de html en zet de tekst erin. 
    document.querySelector("#weer").textContent =
      `In Den Haag is het ${temp}°C, met een windsnelheid van ${wind}km/h`;
  })
  // Oh nee het was een error!
  .catch(err => {
    document.querySelector("#weer").textContent = "Kon het weer niet ophalen.";
    console.error(err);
  });

Uitleg stap voor stap

1. fetch(...) stuurt een verzoek naar de API.
2. .then(res => res.json()) betekent: wacht tot het antwoord er is, en zet dat antwoord om naar JSON.
3. De volgende .then(data => { ... }) krijgt de JSON en leest er waarden uit. Hier halen we temperature en wind op.
4. document.querySelector("#weer") zoekt in de HTML naar het element met id="weer". Met .textContent = ... schrijf je tekst ín dat element. Zo verschijnt de data op de pagina.
5. .catch(err => { ... }) vangt fouten af, bijvoorbeeld als de API niet bereikbaar is. Dan krijgt de gebruiker toch een nette melding.

Kortom: fetch-then–then–catch is een keten: eerst vraag je de data op, dan verwerk je hem, en als er iets misgaat handel je dat netjes af.

Handige denkvragen bij elke API

• Wat wil ik precies tonen? (UI bepaalt welke data nodig is)
• Welk endpoint levert dat? (lees de documentatie en test de URL in je browser)
• Welke sleutel-namen zie ik in de JSON? (noteer de paden die je nodig hebt)
• Wat doe ik als er géén data is of een fout optreedt? (altijd een fallback tonen)

Veelvoorkomende valkuilen

• Te veel data in één keer tonen → begin klein.
• Geen foutafhandeling → altijd een fallback.
• Alleen kleur gebruiken voor betekenis → denk aan toegankelijkheid (POUR).
• API’s met CORS/rate-limits → kies voor klasprojecten een publieke API zonder key.