První fetch

Pokaż mi to: fetch – objednávka kódem

V minulé lekci sis API otevřel(a) v prohlížeči ručně. Teď to samé udělá tvůj JavaScript – příkazem 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);

Co se tu děje, řádek po řádku:

1. fetch(adresa) – pošli požadavek (číšník odchází do kuchyně).
2. await – počkej, než se vrátí. Internet chvíli trvá!
3. odpoved.json() – převeď odpověď na JavaScript objekt.
4. Pak už s daty pracuješ jako s obyčejným objektem: tečka, tečka, gotowe.

async function nacti() {
  // sem patří fetch a await
}
nacti();

Vypiš data na stránku

Konzole je pro programátory – návštěvník chce data vidět na stránce:

<p id="teplota">Wczytuję…</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 =
    `Právě teď je ${data.current_weather.temperature} °C`;
</script>

Známé věci z Czarodzieja (querySelector, textContent) + nový fetch. Nic víc.

Teraz ty 💪

1. Přidej na svůj web odstavec s id="teplota" a skript výše.
2. Změň souřadnice na svoje město.
3. Přidej do výpisu i rychlost větru (data.current_weather.windspeed).
4. Bonus: když je teplota pod 0, přidej k textu „🥶 Oblékni se!”.

Co si z téhle lekce odnést

• fetch(adresa) pošle požadavek, await počká na odpověď.
• .json() převede odpověď na objekt, se kterým už umíš pracovat.
• Data z celého internetu jsou teď jedna funkce daleko.

© 2026 Ing. Martin Polak / AlgoRhino · Warunki użytkowania treści