Ditt første fetch

Jeg viser deg: fetch – at bestille med kode

I siste leksjon åpnede du en API i nettleseren i hånden. Nu gjø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);

Hva 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 tilbake. Internettet tar et øyeblikk!
3. odpoved.json() – konverter svaret til et JavaScript-objekt.
4. Så jobber du med dataene som ethvert vanligt objekt: punktum, punktum, ferdig.

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

Print dataene på siden

Konsollen er til programmerere – en besøkende 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.

Nå er det din tur 💪

1. Legg til et avsnitt med id="teplota" og scriptet ovenfor til din nettside.
2. Endre koordinaterne til din egen by.
3. Legg til også vindhastigheden til visningen (data.current_weather.windspeed).
4. Bonus: når temperaturen er under 0, legg til ”🥶 Bundle up!” til teksten.

Dette tar du med deg fra leksjonen

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

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