Dein erster fetch

Zeig mir das: fetch – bestellen mit Code

In der letzten Lektion hast du eine API von Hand im Browser geöffnet. Jetzt macht das dein JavaScript – mit dem Befehl 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);

Was hier passiert, Zeile für Zeile:

1. fetch(adresa) – sende die Anfrage (der Kellner geht in die Küche).
2. await – warte, bis er zurückkommt. Das Internet braucht einen Moment!
3. odpoved.json() – wandle die Antwort in ein JavaScript-Objekt um.
4. Dann arbeitest du mit den Daten wie mit jedem normalen Objekt: Punkt, Punkt, fertig.

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

Die Daten auf der Seite ausgeben

Die Konsole ist für Programmierer – ein Besucher will die Daten auf der Seite sehen:

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

Bekanntes aus dem Zauberer (querySelector, textContent) plus das neue fetch. Mehr nicht.

Jetzt du 💪

1. Füge deiner Website einen Absatz mit id="teplota" und das Skript oben hinzu.
2. Ändere die Koordinaten auf deine eigene Stadt.
3. Zeige auch die Windgeschwindigkeit an (data.current_weather.windspeed).
4. Bonus: Wenn die Temperatur unter 0 liegt, füge „🥶 Bundle up!“ zum Text hinzu.

Das nimmst du aus dieser Lektion mit

• fetch(adresa) sendet die Anfrage, await wartet auf die Antwort.
• .json() wandelt die Antwort in ein Objekt um, mit dem du schon arbeiten kannst.
• Daten aus dem ganzen Internet sind jetzt nur noch eine Funktion entfernt.

© 2026 Ing. Martin Polak / AlgoRhino · Nutzungsbedingungen für Inhalte