Topic: API Renderen

API

API staat voor Application Programming Interface. Api is een software-interface dat een connectie tussen twee verschillende applicaties mogelijk maakt. Een voorbeeld hiervan is een boodschapper die een verzoek indient bij een provider. Vervolgens wordt het antwoord terug gekoppeld.

Fetch

Met de Fetch() methode worden bestanden/API's opgeroepen en wordt de inhoud gedisplayd. Fetch is gebaseerd op async en await methodes. De Fetch methode heeft één verplichte argument nodig, het pad naar de bron die je wilt ophalen. Bijvoorbeeld de URL van de API. Zodra een Response is opgehaald, zijn er een aantal methoden beschikbaar de inhoud te displayen.

JSON

Met JSON wordt de data uit de API gerenderd. Wanneer de API is gefetcht wordt de .then functie gebruikt. Met de .then functie wordt de opgehaalde data uit de API (wat JSON is) gerenderd door het als een parameter mee te geven in de .then functie. Vervolgens is er een tweede .then functie. In de tweede .then functie krijgen we de actuele JSON-gegevens als parameter. Deze gegevens zien er net zo uit als de gegevens als in de API.

Voorbeeld

await fetch(
    "api-url"
  )
    .then((res) => res.json())
    .then((json) => {

Bronnen:

• Schoenmaker, L. (2019, 23 oktober). Wat is een API en wat kan je ermee? Salesforce NL Blog. https://www.salesforce.com/nl/blog/2019/10/wat-is-een-api.html
• M.D.N. (2021, 17 april). Fetch API - Web APIs | MDN. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
• R. (2020a, april 5). How to Fetch and Display JSON Data in HTML Using JavaScript. How to Create Apps. https://howtocreateapps.com/fetch-and-display-json-html-javascript/