Din första fetch

Jag visar: fetch – beställa med kod

I förra lektionen öppnade du ett API i webbläsaren för hand. Nu gör din JavaScript samma sak – med kommandot 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);

Vad som händer här, rad för rad:

1. fetch(adresa) – skicka förfrågan (servitören går till köket).
2. await – vänta tills den kommer tillbaka. Internet tar en stund!
3. odpoved.json() – gör om svaret till ett JavaScript-objekt.
4. Sedan jobbar du med datan som vilket vanligt objekt som helst: punkt, punkt, klart.

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

Skriv ut datan på sidan

Konsolen är för programmerare – en besökare vill se datan på sidan:

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

Bekant från Trollkarlen (querySelector, textContent) plus det nya fetch. Inget mer.

Nu är det din tur 💪

1. Lägg till ett stycke med id="teplota" och scriptet ovan på din webbplats.
2. Ändra koordinaterna till din egen stad.
3. Lägg till vindhastigheten i visningen också (data.current_weather.windspeed).
4. Bonus: när temperaturen är under 0, lägg till ”🥶 Bundle up!” i texten.

Det här tar du med dig från lektionen

• fetch(adresa) skickar förfrågan, await väntar på svaret.
• .json() gör om svaret till ett objekt du redan kan jobba med.
• Data från hela internet är nu bara en funktion bort.

© 2026 Ing. Martin Polak / AlgoRhino · Villkor för innehållsanvändning