0
251
Visualizações¿Cómo imprimir un elemento de la respuesta api?
Estoy haciendo una aplicación donde puedes ver el porcentaje de lluvia en un sitio web. Estoy usando openweatherapi para obtener los datos. Pero la respuesta de API imprime una gran cantidad de matrices. ¿Cómo cortarlo en uno? (el primer cero de la matriz que quiero imprimir) Publicaré una imagen de la respuesta. 
Aquí está el código:
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 Respostas
Responde à pergunta0
Tus datos vienen por hora. ¿Quizás quieras mostrar ahora mismo?
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
Relatório
0
Debe obtener solo el primer elemento de la matriz por hora :
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>Forma alternativa (que comúnmente usan los codificadores JS)
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
Relatório
Responde à pergunta