Je eerste fetch

Ik laat je zien: fetch – bestellen met code

In de vorige les opende je een API handmatig in je browser. Nu doet je JavaScript hetzelfde – met het commando fetch:

const adresa = 'https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&current_weather=true';

const odpoved = await fetch(adresa);
const data = await odpoved.json();

console.log(data.current_weather.temperature);

Wat er gebeurt, regel voor regel:

1. fetch(adresa) – stuur het verzoek (de ober gaat naar de keuken).
2. await – wacht tot hij terug is. Internet duurt even!
3. odpoved.json() – zet het antwoord om in een JavaScript-object.
4. Dan werk je met de data als met elk object: punt, punt, klaar.

async function nacti() {
  // fetch and await go here
}
nacti();

Print de data op de pagina

De console is voor programmeurs – een bezoeker wil de data op de pagina zien:

<p id="teplota">Loading…</p>

<script type="module">
  const odpoved = await fetch('https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&current_weather=true');
  const data = await odpoved.json();

  document.querySelector('#teplota').textContent =
    `Right now it's ${data.current_weather.temperature} °C`;
</script>

Bekend uit Tovenaar (querySelector, textContent) plus de nieuwe fetch. Meer niet.

Nu jij 💪

1. Voeg een alinea met id="teplota" en het script hierboven toe aan je website.
2. Verander de coördinaten naar je eigen stad.
3. Voeg ook de windsnelheid toe aan de weergave (data.current_weather.windspeed).
4. Bonus: als de temperatuur onder 0 is, voeg ”🥶 Bundle up!” toe aan de tekst.

Wat neem je mee uit deze les

• fetch(adresa) stuurt het verzoek, await wacht op het antwoord.
• .json() zet het antwoord om in een object waar je mee kunt werken.
• Data van het hele internet is nu één functie verwijderd.

© 2026 Ing. Martin Polak / AlgoRhino · Contentgebruiksvoorwaarden