Dit første fetch

Vis mig: fetch – at bestille med kode

I sidste lektion åbnede du en API i din browser i hånden. Nu gør din JavaScript det samme – med fetch-kommandoen:

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);

Hvad der sker her, linje for linje:

1. fetch(adresa) – send forespørgslen (tjeneren går til køkkenet).
2. await – vent på, at den kommer tilbage. Internettet tager et øjeblik!
3. odpoved.json() – konverter svaret til et JavaScript-objekt.
4. Så arbejder du med dataene som ethvert almindeligt objekt: punktum, punktum, færdig.

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

Print dataene på siden

Konsollen er til programmører – en besøgende vil se dataene på siden:

<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>

Velkendt stof fra Troldmand (querySelector, textContent) plus det nye fetch. Ikke mere.

Nu er det din tur 💪

1. Tilføj et afsnit med id="teplota" og scriptet ovenfor til din hjemmeside.
2. Ændr koordinaterne til din egen by.
3. Tilføj også vindhastigheden til visningen (data.current_weather.windspeed).
4. Bonus: når temperaturen er under 0, tilføj ”🥶 Bundle up!” til teksten.

Det tager du med fra denne lektion

• fetch(adresa) sender forespørgslen, await venter på svaret.
• .json() konverterer svaret til et objekt, du allerede ved, hvordan man arbejder med.
• Data fra hele internettet er nu kun én funktion væk.

© 2026 Ing. Martin Polak / AlgoRhino · Vilkår for indholdsbrug