Tvoj prvi fetch

Pokazat ću ti: fetch – naručivanje kodom

U prošloj lekciji si API otvorio ručno u pregledniku. Sada će to isto učiniti tvoj JavaScript – naredbom 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);

Što se događa, redak po redak:

1. fetch(adresa) – pošalji zahtjev (konobar ide u kuhinju).
2. await – pričekaj da se vrati. Internetu treba trenutak!
3. odpoved.json() – pretvori odgovor u JavaScript objekt.
4. Zatim radiš s podacima kao s bilo kojim objektom: točka, točka, gotovo.

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

Ispiši podatke na stranicu

Konzola je za programere – posjetitelj želi vidjeti podatke na stranici:

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

Poznato iz Čarobnjaka (querySelector, textContent) plus novi fetch. Ništa više.

Sad si ti na redu 💪

1. Dodaj odlomak s id="teplota" i gornji skript na svoju web stranicu.
2. Promijeni koordinate na svoj grad.
3. Dodaj i brzinu vjetra u prikaz (data.current_weather.windspeed).
4. Bonus: kad je temperatura ispod 0, dodaj „🥶 Skupljaj se!“ u tekst.

Što ćeš ponijeti iz ove lekcije

• fetch(adresa) šalje zahtjev, await čeka odgovor.
• .json() pretvara odgovor u objekt s kojim već znaš raditi.
• Podaci s cijelog interneta sada su samo jedna funkcija udaljeni.

© 2026 Ing. Martin Polak / AlgoRhino · Uvjeti korištenja sadržaja