Topic: API Renderen - AsaMarjew/GameBuddy GitHub Wiki

Auteur: Muhammet Kömür

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 omgezet om het te verwerken. .fetch is gebaseerd op de 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) => {

Data displayen

Nadat de bovenstaande stappen uitgevoerd zijn, kan je de data renderen. Je maakt bijvoorbeeld een variabel aan en daarin definieer je de data. Bijvoorbeeld const naam = json.data[0].item.name;. In dit voorbeeld krijgen we de naam uit het eerste item van de API. Om dit vervolgens te displayen in HTML sturen we de variabel mee met EJS naar de pagina met res.render. Als je in de HTML bestand met EJS <%= naam %> zou schrijven, zou de naam uit de API in HTML gedisplayd worden.

Bronnen:

GameBuddy Tech Team 6.2 - Philip van Egmond, Kiara Broekhuizen, Muhammet Kömür, Asa Marjew

⚠️ **GitHub.com Fallback** ⚠️