Your first fetch

Show me: fetch – ordering with code

In the last lesson, you opened an API in your browser by hand. Now your JavaScript will do the same thing – with the fetch command:

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

What’s happening here, line by line:

1. fetch(adresa) – send the request (the waiter heads to the kitchen).
2. await – wait for it to come back. The internet takes a moment!
3. odpoved.json() – convert the response into a JavaScript object.
4. Then you work with the data like any regular object: dot, dot, done.

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

Print the data on the page

The console is for programmers – a visitor wants to see the data on the page:

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

Familiar stuff from Magician (querySelector, textContent) plus the new fetch. Nothing more.

Your turn 💪

1. Add a paragraph with id="teplota" and the script above to your website.
2. Change the coordinates to your own city.
3. Add the wind speed to the display too (data.current_weather.windspeed).
4. Bonus: when the temperature is below 0, add ”🥶 Bundle up!” to the text.

What to take away from this lesson

• fetch(adresa) sends the request, await waits for the response.
• .json() converts the response into an object you already know how to work with.
• Data from the whole internet is now just one function away.

© 2026 Ing. Martin Polak / AlgoRhino · Content usage terms