Tu primer fetch

Te lo muestro: fetch – pedir con código

En la lección anterior abriste una API en el navegador a mano. Ahora tu JavaScript hará lo mismo – con el 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);

Qué pasa aquí, línea a línea:

1. fetch(adresa) – envía la petición (el camarero va a la cocina).
2. await – espera a que vuelva. ¡Internet tarda un momento!
3. odpoved.json() – convierte la respuesta en un objeto JavaScript.
4. Luego trabajas con los datos como con cualquier objeto: punto, punto, listo.

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

Imprime los datos en la página

La consola es para programadores – un visitante quiere ver los datos en la página:

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

Cosas que ya conoces del Mago (querySelector, textContent) más el nuevo fetch. Nada más.

Ahora tú 💪

1. Añade un párrafo con id="teplota" y el script de arriba a tu web.
2. Cambia las coordenadas por las de tu ciudad.
3. Añade también la velocidad del viento a la pantalla (data.current_weather.windspeed).
4. Extra: si la temperatura está por debajo de 0, añade «🥶 ¡Abrígate bien!» al texto.

Lo que te llevas de esta lección

• fetch(adresa) envía la petición, await espera la respuesta.
• .json() convierte la respuesta en un objeto con el que ya sabes trabajar.
• Los datos de todo internet están a solo una función de distancia.

© 2026 Ing. Martin Polak / AlgoRhino · Condiciones de uso del contenido