Tvoj prvý fetch

Ukážem ti: fetch – objednávanie kódom

V minulej lekcii si otvoril API v prehliadači ručne. Teraz to urobí tvoj JavaScript – príkazom 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);

Čo sa tu deje, riadok po riadku:

1. fetch(adresa) – pošle požiadavku (čašník ide do kuchyne).
2. await – počkaj, kým sa vráti. Internet chvíľu trvá!
3. odpoved.json() – prevedie odpoveď na javascriptový objekt.
4. Potom pracuješ s dátami ako s obyčajným objektom: bodka, bodka, hotovo.

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

Vypíš dáta na stránku

Konzola je pre programátorov – návštevník chce vidieť dáta na stránke:

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

Známe veci z Kúzelníka (querySelector, textContent) plus nový fetch. Nič viac.

Teraz ty 💪

1. Pridaj na web odsek s id="teplota" a skript vyššie.
2. Zmeň súradnice na svoje mesto.
3. Pridaj do zobrazenia aj rýchlosť vetra (data.current_weather.windspeed).
4. Bonus: keď teplota klesne pod 0, pridaj do textu „🥶 Bundle up!”.

Čo si z tejto lekcie odnášaš

• fetch(adresa) pošle požiadavku, await počká na odpoveď.
• .json() prevedie odpoveď na objekt, s ktorým už vieš pracovať.
• Dáta z celého internetu sú teraz len jedna funkcia ďaleko.

© 2026 Ing. Martin Polak / AlgoRhino · Podmienky používania obsahu