API's

Wat zijn API's?

API staat voor Application Programming Interface. Een API is een manier om informatie uit te wisselen tussen verschillende applicaties, zonder dat je zelf alle code hoeft te schrijven of te begrijpen.

Praktische voorbeelden van API's

Waarom API's gebruiken?

Zonder API's zou je moeten:

• Zelf een database maken met alle filmgegevens
• Zelf alle weerdata verzamelen
• Zelf alle nieuwsartikelen schrijven
• Alles constant bijwerken

Met API's kun je:

• Data van bestaande databases gebruiken
• Altijd de nieuwste informatie krijgen
• Je focussen op het bouwen van je eigen applicatie
• Tijd en geld besparen

Hoe werkt een API?

API's gebruiken werkt precies hetzelfde als het ophalen van data uit een JSON-bestand met fetch().

Stap 1: Van JSON-bestand naar API

JSON-bestand ophalen (zoals je al kent):

fetch('./cars.json')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

API ophalen (nieuwe manier):

fetch('https://dragonball-api.com/api/characters')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

Stap 2: De data begrijpen

Wanneer je data uit een API ophaalt, krijg je vaak een object terug dat er zo uitziet:

{
  "items": [
    { "name": "Goku", "power": 9000 },
    { "name": "Vegeta", "power": 8500 },
    { "name": "Piccolo", "power": 7000 }
  ],
  "total": 3
}

Stap 3: Door de data loopen

Om alle karakters te tonen, moet je door de array items loopen:

fetch('https://dragonball-api.com/api/characters')
  .then(response => response.json())
  .then(data => {
    // Van 'data' willen we de 'items' array:
    for (let character of data.items) {
      console.log(character.name); // Toont alle namen
    }
  });

Volledig werkend voorbeeld

HTML

<div id="characters"></div>

JavaScript

fetch('https://dragonball-api.com/api/characters')
  .then(response => response.json())
  .then(data => {
    const container = document.getElementById('characters');
    
    for (let character of data.items) {
      // Maak een div voor elk karakter
      const characterDiv = document.createElement('div');
      characterDiv.innerHTML = `
        <h3>${character.name}</h3>
        <p>Power Level: ${character.power || 'Onbekend'}</p>
        <img src="${character.image}" alt="${character.name}" width="100">
      `;
      
      // Voeg styling toe
      characterDiv.style.border = '1px solid #ccc';
      characterDiv.style.padding = '10px';
      characterDiv.style.margin = '10px';
      characterDiv.style.borderRadius = '5px';
      
      container.appendChild(characterDiv);
    }
  })
  .catch(error => {
    console.log('Er ging iets mis:', error);
  });

Met error handling

API's kunnen soms niet beschikbaar zijn. Gebruik altijd .catch() voor foutafhandeling:

fetch('https://dragonball-api.com/api/characters')
  .then(response => {
    if (!response.ok) {
      throw new Error('API is niet beschikbaar');
    }
    return response.json();
  })
  .then(data => {
    const container = document.getElementById('characters');
    
    for (let character of data.items) {
      const characterDiv = document.createElement('div');
      characterDiv.innerHTML = `
        <h3>${character.name}</h3>
        <p>Power Level: ${character.power || 'Onbekend'}</p>
      `;
      container.appendChild(characterDiv);
    }
  })
  .catch(error => {
    console.log('Fout:', error);
    // Toon een foutmelding aan de gebruiker
    document.getElementById('characters').innerHTML = 
      '<p>Sorry, data kan niet geladen worden.</p>';
  });

API's met Async/Await

Je kunt API's ook ophalen met async/await (moderne en duidelijkere syntax):

Basis voorbeeld

async function haalCharactersOp() {
  try {
    const response = await fetch('https://dragonball-api.com/api/characters');
    
    if (!response.ok) {
      throw new Error('API is niet beschikbaar');
    }
    
    const data = await response.json();
    
    console.log(data);
    
  } catch (error) {
    console.error('Fout:', error);
  }
}

haalCharactersOp();

Volledig voorbeeld met DOM

async function toonCharacters() {
  const container = document.getElementById('characters');
  
  try {
    // Laad indicator:
    container.innerHTML = '<p>Laden...</p>';
    
    // Haal data op:
    const response = await fetch('https://dragonball-api.com/api/characters');
    
    if (!response.ok) {
      throw new Error('API request failed');
    }
    
    const data = await response.json();
    
    // Leeg de container:
    container.innerHTML = '';
    
    // Toon alle characters:
    for (let character of data.items) {
      const div = document.createElement('div');
      div.innerHTML = `
        <h3>${character.name}</h3>
        <p>Power: ${character.power || 'Onbekend'}</p>
        <img src="${character.image}" alt="${character.name}" width="100">
      `;
      
      div.style.border = '1px solid #ccc';
      div.style.padding = '10px';
      div.style.margin = '10px';
      
      container.appendChild(div);
    }
    
  } catch (error) {
    console.error('Error:', error);
    container.innerHTML = '<p>Fout bij laden van data</p>';
  }
}

// Start functie:
toonCharacters();

API's met query parameters

Sommige API's accepteren parameters in de URL:

async function zoekCharacter(naam) {
  try {
    // Voeg parameter toe aan URL:
    const response = await fetch(`https://dragonball-api.com/api/characters?name=${naam}`);
    const data = await response.json();
    
    console.log(data);
    
  } catch (error) {
    console.error('Error:', error);
  }
}

// Gebruik:
zoekCharacter('Goku');

Meerdere API calls

async function haalAllesOp() {
  try {
    // Haal meerdere dingen tegelijk op:
    const [characters, planets] = await Promise.all([
      fetch('https://dragonball-api.com/api/characters').then(r => r.json()),
      fetch('https://dragonball-api.com/api/planets').then(r => r.json())
    ]);
    
    console.log('Characters:', characters);
    console.log('Planets:', planets);
    
  } catch (error) {
    console.error('Error:', error);
  }
}

haalAllesOp();

Veelvoorkomende problemen

// Probleem: data.items bestaat niet
console.log(data.items); // undefined

// Oplossing: Controleer eerst of het bestaat
if (data.items) {
  console.log(data.items);
} else {
  console.log('Items array niet gevonden');
  console.log('Data structuur:', data); // Kijk wat je wél krijgt
}

// Error: "Access to fetch has been blocked by CORS policy"

// Probleem: Sommige API's blokkeren requests van browsers
// Oplossing: 
// - Gebruik een andere API
// - Of gebruik een CORS proxy (voor development)
// - Of vraag de API eigenaar om CORS in te schakelen

// Sommige API's hebben een sleutel nodig
// 1. Registreer op hun website voor een gratis key
// 2. Voeg de key toe aan je URL:

const API_KEY = 'jouw-api-key-hier';
const url = `https://api.example.com/data?key=${API_KEY}`;

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data));

// Je verwacht data.items maar krijgt data.results

// Oplossing: Log eerst de hele data om te zien wat je krijgt
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log('Hele data object:', data); // Kijk hier!

    // Nu zie je welke property de array bevat:
    // Misschien is het data.results?
    // Of misschien data.data?
    // Of misschien is data zelf al een array?
  });

Tips voor het werken met API's

Gratis API's om mee te oefenen

Cheat sheet

// Basic API call template met async/await:
async function haalDataOp() {
  try {
    const response = await fetch('API_URL_HIER');
    
    if (!response.ok) {
      throw new Error('API error');
    }
    
    const data = await response.json();
    
    console.log(data); // Kijk eerst wat je krijgt!

    // Werk met data...
    for (let item of data.items) { // Of data.results, of data zelf
      console.log(item);
    }
    
  } catch (error) {
    console.error('Error:', error);
  }
}

haalDataOp();