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