Cuando coloco esto en el navegador, me devuelve el objeto json con todos los datos meteorológicos: http://api.openweathermap.org/data/2.5/weather?zip=90210&units=imperial&appid= {API Key}
Sin embargo, estoy usando mi XAMPP Apache en la carpeta htdocs para intentar probarlo en mi código. ¿Puede alguien mirar mi código y ver qué está mal aquí? Muchas gracias por la ayuda.
var weatherInfo = document.getElementById("weather"); var zipCodeForm = document.getElementById("zipCodeForm"); function getWeather(zipCode){ //create the url for the request var endpoint = "http://api.openweathermap.org/data/2.5/weather"; var apiKey = {API Key}; var queryString = "zip=" + zipCode + "&units=imperial&appid=" + apiKey; var url = endpoint + "?" +queryString; //create the request to get the weather data var xhr = new XMLHttpRequest(); xhr.addEventListener("load", responseReceivedHandler); xhr.requestType = "json"; xhr.open("GET", url); xhr.send(); console.log("getWeather") console.log(xhr.response.status); } function responseReceivedHandler(){ if(this.status === 200){ weatherInfo.innerHTML = "Current temperature: " + this.response.main.temp; } else{ weatherInfo.innerHTML="Not working"; } console.log("responseReceivedHandler") } getWeather(90210); <body> <form id="zipCodeForm"> <label for="zipCode">Please enter your zip code: </label> <input type="text" name="zipCode" id="zipCode"> <input type="submit" name="submit"> </form> <div id="weather"></div> </body>¡¡AQUÍ ESTÁ LA SOLUCIÓN!!
Mi respuesta necesitaba convertirse de json a objeto javascript. Seguía dándome indefinido cuando probé this.response.main.temp. La forma en que lo descubrí fue cuando probé this.response[0], el resultado fue un "{". Pensé, está bien, entonces esto debe ser incapaz de interpretar este json como un objeto. Es solo una cadena de todos los caracteres json. Así que encontré json.parse() para convertirlo en un objeto javascript, y bam-- API ping éxito con la capacidad de acceder a todos los datos.
Alternativamente, podría simplemente cambiar "requestType = "json"" a responseType = json.... en lugar de tener que analizarlo en un objeto. No es tipo de solicitud. Es tipo de respuesta.