# Front-end API integratie

APIs worden vaak gebruikt om gegevens van externe servers of bronnen op te halen en te integreren in de gebruikersinterface van de website.

Basis
- HTML-Bestand
- JavaScript
Query Params
Filteren
- HTML updaten
- Javascript Filteren

# Basis

Om data van een externe bron weer te geven in de browser hebben we nood aan:

Een HTML-bestand
JavaScript
- Fetchen van data
- Renderen van data

# HTML-Bestand

Begin met het opzetten van een basis HTML-structuur met een container waar je de gegevens wilt weergeven.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Front-end API Gebruik</title>
  </head>
  <body>
    <div id="data-container"></div>
    <script src="script.js"></script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

# JavaScript

Maak een JavaScript-bestand om de gegevens op te halen en te renderen.

We maken een asynchrone functie om data op te halen.

async function fetchData() {
  // Gebruik de Fetch API om een GET-verzoek naar je API-endpoint te maken
  const response = await fetch("https://api.example.com/data");
  // Parse de respons naar JSON-formaat
  const data = await response.json();
  console.log(data);
}

1
2
3
4
5
6
7

Nadat je bestand is geladen, zullen we de data ophalen en de functie oproepen…
```
document.addEventListener("DOMContentLoaded", fetchData);
```
1

In plaats van onze te loggen zullen we deze moeten renderen. Hiervoor maken we een afzonderlijke, synchrone functie.

function renderData(data) {
  // Selecteer het container-element
  const $container = document.getElementById("data-container");

  // (Optioneel) Wis de vorige inhoud in het container-element
  $container.innerHTML = "";

  // Itereer over de gegevens en maak HTML-elementen om ze weer te geven
  data.forEach((item) => {
    const listItem = document.createElement("li");
    listItem.textContent = item.name; // Indien items een name'-eigenschap hebben
    $container.appendChild(listItem);
  });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Vervang je console.log() met een render-functie.

// Roep een functie aan om de gegevens op de HTML-pagina te renderen
renderData(data);

1
2

Voeg validatie toe en maak je code robuuster, try-catch en throw.

async function fetchData() {
  try {
    // Gebruik de Fetch API om een GET-verzoek naar je API-endpoint te maken
    const response = await fetch("https://api.example.com/data");

    // Controleer of de respons succesvol is (statuscode 200-299)
    if (!response.ok) {
      throw new Error(`Fout: ${response.status} - ${response.statusText}`);
    }

    // Parse de respons naar JSON-formaat
    const data = await response.json();

    // Roep een functie aan om de gegevens op de HTML-pagina te renderen
    renderData(data);
  } catch (error) {
    console.error("Fout bij het ophalen van gegevens:", error.message);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Eindcode

app.js

// script.js

document.addEventListener("DOMContentLoaded", fetchData);

async function fetchData() {
  try {
    // Gebruik de Fetch API om een GET-verzoek naar je API-endpoint te maken
    const response = await fetch("https://api.example.com/data");

    // Controleer of de respons succesvol is (statuscode 200-299)
    if (!response.ok) {
      throw new Error(`Fout: ${response.status} - ${response.statusText}`);
    }

    // Parse de respons naar JSON-formaat
    const data = await response.json();

    // Roep een functie aan om de gegevens op de HTML-pagina te renderen
    renderData(data);
  } catch (error) {
    console.error("Fout bij het ophalen van gegevens:", error.message);
  }
}

function renderData(data) {
  // Toegang tot het container-element
  const container = document.getElementById("data-container");

  // Wis de vorige inhoud in het container-element
  container.innerHTML = "";

  // Itereer over de gegevens en maak HTML-elementen om ze weer te geven
  data.forEach((item) => {
    const listItem = document.createElement("li");
    listItem.textContent = item.name; // Ga ervan uit dat je gegevens een 'name'-eigenschap hebben
    container.appendChild(listItem);
  });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# Query Params

Query parameters, ook wel querystrings genoemd, zijn toevoegingen aan een URL die informatie bevatten die naar een webserver wordt gestuurd als onderdeel van een HTTP-verzoek.

Ze worden vaak gebruikt om specifieke instructies aan de server door te geven of om gegevens te filteren.

Query parameters worden toegevoegd aan het einde van een URL en beginnen met een vraagteken (?), gevolgd door één of meer sleutel-waardeparen gescheiden door het ampersandteken (&).

https://voorbeeld.com/api/data?categorie=elektronica&sorteerOp=prijs

We bouwen verder op ons bovenstaand voorbeeld. Het doel is dat we verschillende, gefilterde data kunnen ophalen op basis van de huidige pagina. Dit kan handig zijn om detail-pagina’s weer te geven.

Om dit te bereiken doorlopen we volgende stappen:

Neem de huidige URL.

// Verkrijg de huidige URL
const currentUrl = window.location.href;

1
2

Zet deze string om naar een URL-object.
```
const url = new URL(currentUrl);
```
1

Haal uit dit URL-object de queryparameters.

// Verkrijg de zoekparameters (query parameters)
const searchParams = url.searchParams;

1
2

Transformeer je searchParams naar een vorm zodat je het kan gebruiken.

const queryString = searchParams.toString();

searchParams.get("category");

const queryParams = {};
searchParams.forEach((value, key) => {
  queryParams[key] = value;
});

1
2
3
4

Voeg de (omgevormde) search params to aan je API-endpoint

// Voeg query string toe aan het API-eindpunt
const apiUrl = `https://api.example.com/data?${queryString}`;
const detailUrl = `https://api.example.com/posts/${searchParams.get(
  "postId"
)}`;

1
2
3
4
5

Eindcode

app.js

// script.js

document.addEventListener("DOMContentLoaded", fetchData);

async function fetchData() {
  try {
    // Haal de parameters op van de huidige URL
    const queryString = getParamsString(window.location.href);

    // Voeg query string toe aan het API-eindpunt
    const apiUrl = `https://api.example.com/data?${queryString}`;

    // Gebruik de Fetch API om een GET-verzoek naar je API-endpoint te maken
    const response = await fetch(apiUrl);

    if (!response.ok) {
      throw new Error(`Fout: ${response.status} - ${response.statusText}`);
    }

    const data = await response.json();

    renderData(data);
  } catch (error) {
    console.error("Fout bij het ophalen van gegevens:", error.message);
  }
}

function getParamsString(url) {
  // Maak een URL-object van de huidige URL
  const url = new URL(url);

  // Verkrijg de zoekparameters (query parameters)
  const searchParams = url.searchParams;
  return searchParams.toString();
}

function renderData(data) {
  const container = document.getElementById("data-container");

  container.innerHTML = "";

  data.forEach((item) => {
    const listItem = document.createElement("li");
    listItem.textContent = item.name;
    container.appendChild(listItem);
  });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

# Filteren

Om een filter systeem in de front-end te ontwikkelen dat de query parameters bijwerkt en opnieuw gegevens ophaalt, zullen we de HTML moeten aanpassen.

# HTML updaten

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Filter Systeem</title>
  </head>
  <body>
    <form id="filter-form">
      <label for="category">Categorie:</label>
      <select id="category" name="category">
        <option value="electronics">Elektronica</option>
        <option value="clothing">Kleding</option>
        <!-- Voeg andere categorieën toe indien nodig -->
      </select>

      <label for="sort">Sorteer op:</label>
      <select id="sort" name="sort">
        <option value="price">Prijs</option>
        <option value="name">Naam</option>
        <!-- Voeg andere sorteeropties toe indien nodig -->
      </select>

      <button type="submit">Filteren</button>
    </form>

    <div id="data-container"></div>

    <script src="script.js"></script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# Javascript Filteren

We zullen logica moeten voorzien om de gewijzigde filters toe te voegen aan onze URL én opnieuw de data fetchen door de API-endpoint ook te updaten.

Voeg een event listener toe wanneer we op ‘Filteren’ drukken.

const filterForm = document.getElementById("filter-form");
const filterButton = document.getElementById("filter-button");

filterButton.addEventListener("click", function () {});

1
2
3
4

Verkrijg de waarden uit dit formulier.

// Verkrijg geselecteerde waarden uit het formulier .value
const category = document.getElementById("category").value;
const sort = document.getElementById("sort").value;

1
2
3

// Verkrijg geselecteerde waarden uit het formulier met FormData
const formData = new FormData(filterForm);
const category = formData.get("category");
const sort = formData.get("sort");

1
2
3
4

Maak een URL-object van de huidige URL zodat we deze makkelijker kunnen updaten.

// Verkrijg de huidige URL en maak een URL-object
const currentUrl = window.location.href;
const url = new URL(currentUrl);

1
2
3

Update de query of search parameters van dit URL object.

// Update de query parameters met de geselecteerde waarden
url.searchParams.set("category", category);
url.searchParams.set("sort", sort);

1
2
3

Zorg dat je nieuwe data getoond wordt, dit kan door de pagina te herladen met de nieuwe URL of door de fetchData() functie opnieuw op te roepen.

¨Met de pagina te herladen

// Navigeer naar de bijgewerkte URL
window.location.href = url.toString();

1
2

Zonder pagina te herladen (AJAX)

// Roep de fetchData-functie aan om gegevens op te halen en te renderen
fetchData(url.toString());

// Werk de URL bij zonder de pagina opnieuw te laden
history.pushState({}, null, url.toString());

1
2
3
4
5

Eindcode

app.js

const filterForm = document.getElementById("filter-form");
const filterButton = document.getElementById("filter-button");
const BASE_API_URL = "https://api.example.com/data"

filterButton.addEventListener("click", function () {
  // Verkrijg geselecteerde waarden uit het formulier
  const category = document.getElementById("category").value;
  const sort = document.getElementById("sort").value;

  // Verkrijg de huidige URL en maak een URL-object
  const currentUrl = window.location.href;
  const url = new URL(currentUrl);

  // Update de query parameters met de geselecteerde waarden
  url.searchParams.set("category", category);
  url.searchParams.set("sort", sort);

  // Roep de fetchData-functie aan om gegevens op te halen en te renderen
  fetchData(url.searchParams.toString());

  // Werk de URL bij zonder de pagina opnieuw te laden
  history.pushState({}, null, url.toString());
});

// Functie om gegevens op te halen en te renderen met AJAX
// Dit kan je ook herschrijven met async/await.
function fetchData(paramsString) {
  fetch(`${BASE_API_URL}?${paramsString}`);
    .then((response) => {
      if (!response.ok) {
        throw new Error(`Fout: ${response.status} - ${response.statusText}`);
      }
      return response.json();
    })
    .then((data) => renderData(data))
    .catch((error) =>
      console.error("Fout bij het ophalen van gegevens:", error.message)
    );
}

function getParamsString(url) {
  // Maak een URL-object van de huidige URL
  const url = new URL(url);

  // Verkrijg de zoekparameters (query parameters)
  const searchParams = url.searchParams;
  return searchParams.toString();
}

// Functie om gegevens op de webpagina te renderen
function renderData(data) {
  const container = document.getElementById("data-container");
  container.innerHTML = "";

  data.forEach((item) => {
    const listItem = document.createElement("li");
    listItem.textContent = item.name; // Ga ervan uit dat je gegevens een 'name'-eigenschap hebben
    container.appendChild(listItem);
  });
}

// Roep fetchData aan wanneer de pagina wordt geladen
fetchData(getParamsString(window.location.href));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

Server-side API Setup