• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

126
Vistas
API url printing one specific item with javascript

I have made some code were you can console.log() one item from a fetch.

If I want to console.log() the lat property from data it works. Now, I want to console.log() the pop property element from the API. The pop property is inside the hourly array. I think (see url in the code).

But there is a problem, I cant get this to print in either the console or HTML. Can anyone help me console.log() the pop property from the API fetch?

<body>
<p>De regen percentage is: <br><span id="pop"></span></p>
<script>
  const api_url = 'https://api.openweathermap.org/data/2.5/onecall?lat=52.1092717&lon=5.1809676&&exclude=current,minutely,timezone,alerts&appid=add524720c6b11d0649d761f76e953c8';
  async function getRain(){
    const response = await fetch(api_url);
    const  data = await response.json();
    const {lat} = data;
    console.log(lat);
    document.getElementById('pop').textContent = lat;
  }
  getRain();
</script>
</body>
about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Here's how to access the pop property. The hourly property is an array so you need to loop through the array to access each pop value. If you want to access a specific value, you can filter the hourly property for elements in the array that meet your condition.

<body>
<p>De regen percentage is: <br><span id="pop"></span></p>
<script>
  const api_url = 'https://api.openweathermap.org/data/2.5/onecall?lat=52.1092717&lon=5.1809676&&exclude=current,minutely,timezone,alerts&appid=add524720c6b11d0649d761f76e953c8';
  async function getRain(){
    const response = await fetch(api_url);
    const  data = await response.json();
    const {lat, hourly} = data;
    console.log(lat);
    hourly.forEach(element => {
       console.log(element.pop);
    });
    document.getElementById('pop').textContent = lat;
  }
  getRain();
</script>
</body>

Filtered example: Here I am looping through (filtering) the hourly array for elements where the temp is greater than 283.

console.log(hourly.filter(a => a.temp > 283))

If you want to print all the pop data from the api in the HTML element like your comment suggests, you can do it in the following way: I am using the map function to loop through the array and return each pop value.

const popArr = hourly.map(ele => ele.pop);

document.getElementById('pop').textContent = popArr;
about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda