Het opslaan van data in een lokaal JSON bestand is een eenvoudig alternatief voor het gebruik van een database. Met behulp van de Fetch API kan de data worden ingelezen door het JavaScript bestand. Vervolgens kunnen de gegevens in HTML-elementen worden weergeven op de website.

Scrimba playlist Fetch API & JSON

1. Fetch & .then

De fetch functie in JavaScript geeft een een Promise-object terug. Een Promise is een object dat de uiteindelijke voltooiing of mislukking van een asynchrone operatie representeert, en de waarde die het resultaat van die operatie vertegenwoordigt.

Een Promise heeft drie toestanden:

1. Pending (In afwachting): De initiële toestand wanneer een Promise wordt gemaakt. Dit betekent dat de asynchrone operatie nog niet is voltooid.
2. Fulfilled (Voltooid): De toestand waarin de asynchrone operatie succesvol is voltooid, en de uiteindelijke waarde beschikbaar is.
3. Rejected (Afgewezen): De toestand waarin de asynchrone operatie mislukt is, en er is een fout opgetreden. Een afgewezen Promise bevat een reden voor de afwijzing.

Afhandelen van een Promise

Met .then() kun je een functie opgeven die wordt uitgevoerd wanneer de Promise succesvol voltooid is. Deze functie ontvangt de uiteindelijke waarde van de Promise als een argument. Onderstaand vind je een voorbeeld met de fetch functie:

Fetch API & JSON 01

fetch('pt-studenten.json')
/* Dit start een HTTP-request naar het opgegeven pad (pt-studenten.json) om JSON-gegevens op te halen. */
  .then(response => {
    /* De .then() methode wordt gebruikt om een functie uit te voeren zodra de HTTP-response is ontvangen. */
    if (!response.ok) {
    /* Hier wordt gecontroleerd of de HTTP-response succesvol is (response.ok is true). Als het niet succesvol is, wordt een fout gegenereerd met de boodschap 'Network response was not ok'. */
      throw new Error('Network response was not ok');
    }
    return response.json()
    /* Als de response succesvol is, wordt de .json() methode aangeroepen op de response. Deze methode zorgt ervoor dat de responsebody wordt gelezen als JSON en retourneert een JavaScript-object (of een Promise die resulteert in een object). Hierdoor kun je gemakkelijk de gegevens manipuleren en gebruiken in je JavaScript-code. */
  })
  .then(json => {
    /* Nadat de JSON-gegevens zijn geëxtraheerd, wordt de volgende .then() gebruikt om een functie uit te voeren met het resulterende JavaScript-object (json). In dit geval wordt de naam van de eerste student uitgevoerd en gelogd naar de console. */
    console.log(json["studenten"][0]["naam"])
  })
  .catch(error => {
    /* De .catch() methode wordt gebruikt om fouten af te handelen. Als er ergens in het proces een fout optreedt, wordt deze hier afgevangen en gelogd naar de console. */
    console.error('There was a problem with the fetch operation:', error)
  })

Fetch API & JSON 02

Onderstaand een vereenvoudigde variant van het inlezen van een lokaal JSON-bestand met Fetch. Er vindt geen controle plaats.

fetch('pt-studenten.json')
  .then(response => response.json())  
			// Maak een JS object van het JSON-bestand
  .then(data => { 
			console.log(data["studenten"][0]["naam"]) 
			// log de naam van de eerste student in het JS object naar de console
	})