0
244
VistasHow to print one item from api response?
i making an app where you can see the rain percentage on a website. I am using the openweatherapi to get the data. But the api response prints out a lot of array. How to just cut it to one? (the first zero of the array that i want to print) I will post a picture of the reponse.
Here is the code:
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 {
hourly
} = data;
const popArr = hourly.map(element => element.pop);
hourly.forEach(element => {
console.log(element.pop);
});
// document.getElementById('pop').textContent = pop;
document.getElementById('pop').textContent = popArr;
}
getRain();<div id="maintext">
<p>De regen percentage is: <br><span id="pop"></span>%</p>
</div>
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Your data comes per hour. Perhaps you want to show just now?
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 { hourly } = data;
const popList = {}
hourly.forEach(({dt,pop}) => popList[new Date(dt*1000).toLocaleString().split(",")[1].trim()] = pop);
const time = `${new Date().toLocaleString().match(/(\d{2}):/)[1]}:00:00`;
document.getElementById('pop').innerHTML = `${time}: ${popList[time]}%`; // percentage at nearest hour
}
getRain();<div id="maintext">
<p>De regen percentage is: <br><span id="pop"></span></p>
</div>
·
Juan Pablo Isaza
Denunciar
0
You should get only the first item from the hourly array:
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 { hourly } = data; // get hourly data in array of objects form
// THE CRUCIAL CODE YOU FORGOT
// You must ONLY GET THE FIRST ITEM from the "hourly" array
const firstHourData = hourly[0]; // Get the first hour data object from "hourly" array
document.getElementById("pop").textContent = firstHourData.pop;
}
getRain();<div id="maintext">
<p>De regen percentage is: <br /><span id="pop"></span>%</p>
</div>Alternative way (that commonly used by JS coders)
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 getRainSimplified() {
await fetch(api_url)
.then((response) => {
return response.json();
})
.then(({ hourly }) => {
document.getElementById("pop").textContent = hourly[0].pop;
});
}
getRainSimplified();<div id="maintext">
<p>De regen percentage is: <br /><span id="pop"></span>%</p>
</div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta