Estoy tratando de obtener datos de https://wttr.in/?format=j1 para mostrarlos en una página web. Soy muy nuevo en Javascript, así que esperaba que esto fuera fácil, pero estoy luchando para que funcione, ¿qué estoy haciendo mal?
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body> <p id="temp"></p> </body> <script> const api_url = "https://wttr.in/?format=j1"; async function getWeather() { const response = await fetch(api_url); const data = await response.json(); const weather = data.results[0].current_condition[0]; let { temp } = weather.temp_C; document.getElementById("temp").href = "temp:" + temp; getWeather(); </script> </html>Según los comentarios de CBroe (gracias por la ayuda), los principales problemas con mi código fueron algunas cosas.
El código de trabajo se ve así:
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body> <p id="temp"></p> </body> <script> const api_url = "https://wttr.in/?format=j1"; async function getWeather() { const response = await fetch(api_url); const data = await response.json(); const weather = data.current_condition[0]; let temp = weather.temp_C; document.getElementById("temp").innerHTML = "temp:" + temp; } getWeather(); </script> </html>No está analizando la respuesta json correctamente. Los data no tienen ninguna matriz de resultados, es un objeto.
Entonces, para obtener la current_condition , debe hacer algo como esto:
const currentCondition = data.current_condition[0]; Además, para obtener temp_C esto está mal:
let { temp } = weather.temp_C; //WRONG // reason is that this statement means that `temp_C` is an object, and it contains `temp` property, which is not the case here. Because temp_C is a string. Entonces, para obtener temp_C , simplemente debe hacer esto:
let temp_C = currentCondition.temp_C; Además, vale la pena mencionar aquí que si está utilizando temp_C solo para fines de visualización y no tiene la intención de reasignarle ningún valor, entonces es mejor usar const en lugar de let
Entonces se convertiría en:
const temp_C = currentCondition.temp_C;Y si desea usar 'desestructuración', debe escribirlo así:
const { temp_C } = currentCondition; También a su función le falta el paréntesis de cierre } .