Il tuo primo fetch

Te lo mostro: fetch – ordinare con il codice

Nell’ultima lezione, hai aperto un’API nel browser a mano. Ora il tuo JavaScript fa la stessa cosa – con il comando 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);

Cosa succede qui, riga per riga:

1. fetch(adresa) – invia la richiesta (il cameriere va in cucina).
2. await – aspetta che torni. Internet ci mette un momento!
3. odpoved.json() – converti la risposta in un oggetto JavaScript.
4. Poi lavori con i dati come con qualsiasi oggetto: punto, punto, fatto.

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

Stampa i dati sulla pagina

La console è per i programmatori – un visitatore vuole vedere i dati sulla pagina:

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

Roba familiare dal Mago (querySelector, textContent) più il nuovo fetch. Nient’altro.

Ora tocca a te 💪

1. Aggiungi un paragrafo con id="teplota" e lo script sopra al tuo sito web.
2. Cambia le coordinate con la tua città.
3. Aggiungi anche la velocità del vento al display (data.current_weather.windspeed).
4. Bonus: quando la temperatura è sotto lo 0, aggiungi ”🥶 Bundle up!” al testo.

Cosa porti via da questa lezione

• fetch(adresa) invia la richiesta, await aspetta la risposta.
• .json() converte la risposta in un oggetto che già sai usare.
• I dati di tutto internet sono ora a una sola funzione di distanza.

© 2026 Ing. Martin Polak / AlgoRhino · Condizioni d'uso dei contenuti