Unable to retrieve JSON objects from the fCC weather app. When trying to set the humidity property of the weather object using weather.humidity = main.humidity; I get the message “Uncaught ReferenceError:main not defined”. I do not understand why because main and humidity are keys returned by AJAX. Here is my js code:
var temp;
var humidity;
var icon;
var desc;
var wind;
var direction;
var loc;
function updateByGeo(lat, lon) {
var url = "https://fcc-weather-api.glitch.me/api/current?" + "lat=" + lat + "&lon=" + lon;
sendRequest(url);
}
function sendRequest(url) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var data = JSON.parse(xmlhttp.responseText);
var weather = {};
weather.icon = weather.icon;
weather.humidity = main.humidity;
weather.wind = wind.speed;
weather.direction = wind.deg;
weather.desc = weather.description;
weather.temp = main.temp;
//weather.loc =
update(weather);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function showPosition(position) {
updateByGeo(position.coords.latitude, position.coords.longitude);
}
function update(weather) {
temp.innerHTML = weather.temp;
loc.innerHTML = weather.loc;
}
window.onload = function () {
temp = document.getElementById("temperature");
loc = document.getElementById("location");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
var unable = window.prompt("Unfortunately we are unable to discover your location.");
}
}