Ensimmäinen fetch

Näytän sinulle: fetch – tilaus koodilla

Edellisessä oppitunnissa avasit API:n selaimessa käsin. Nyt JavaScriptisi tekee saman – fetch-komennolla:

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

Mitä tässä tapahtuu, rivi riviltä:

1. fetch(adresa) – lähetä pyyntö (tarjoilija menee keittiöön).
2. await – odota että se palaa. Internet kestää hetken!
3. odpoved.json() – muunna vastaus JavaScript-objektiksi.
4. Sitten työskentelet datalla kuin tavallisen objektin kanssa: piste, piste, valmis.

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

Tulosta data sivulle

Konsoli on ohjelmoijille – vierailija haluaa nähdä datan sivulla:

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

Tuttuja asioita Taikurilta (querySelector, textContent) plus uusi fetch. Ei muuta.

Nyt sinun vuorosi 💪

1. Lisää kappale id="teplota":lla ja yllä oleva skripti verkkosivullesi.
2. Vaihda koordinaatit omaan kaupunkiisi.
3. Lisää näyttöön myös tuulen nopeus (data.current_weather.windspeed).
4. Bonus: kun lämpötila on alle 0, lisää tekstiin ”🥶 Bundle up!”

Mitä opit tästä oppitunnista

• fetch(adresa) lähettää pyynnön, await odottaa vastausta.
• .json() muuntaa vastauksen objektiksi, jonka kanssa osaat jo työskennellä.
• Koko internetin data on nyt vain yhden funktion päässä.

© 2026 Ing. Martin Polak / AlgoRhino · Sisällön käyttöehdot