Tvoj prvi fetch

Pokažem ti: fetch – naročanje s kodo

V prejšnji lekciji si API odprl ročno v brskalniku. Zdaj bo isto naredil JavaScript – z ukazom 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);

Kaj se dogaja, vrstico za vrstico:

1. fetch(adresa) – pošlje zahtevo (natakar gre v kuhinjo).
2. await – počakaj, da pride nazaj. Internet potrebuje trenutek!
3. odpoved.json() – odgovor pretvori v JavaScript objekt.
4. Nato delaš s podatki kot z navadnim objektom: pika, pika, konec.

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

Izpiši podatke na stran

Konzola je za programerje – obiskovalec hoče podatke na strani:

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

Znano iz Čarovnika (querySelector, textContent) plus nov fetch. Nič več.

Zdaj si na vrsti 💪

1. Na stran dodaj odstavek z id="teplota" in skript zgoraj.
2. Koordinate spremeni na svoje mesto.
3. Na prikaz dodaj tudi hitrost vetra (data.current_weather.windspeed).
4. Bonus: ko je temperatura pod 0, v besedilo dodaj ”🥶 Bundle up!”.

Kaj si vzameš iz te lekcije

• fetch(adresa) pošlje zahtevo, await počaka na odgovor.
• .json() pretvori odgovor v objekt, s katerim že znaš delati.
• Podatki celega interneta so zdaj le eno funkcijo stran.

© 2026 Ing. Martin Polak / AlgoRhino · Pogoji uporabe vsebine