I am working with the OpenWeatherMap API and can't seem to figure out why one of my fields is showing up undefined. Everything is working except for when I try to retrieve the weather condition, which is located at weather.description, it is returning undefined. All of the other variables fill in fine. Anyone know what could be preventing this from working correctly? My JavaScript:
var request = new XMLHttpRequest();
function getWeather() {
var latitude = document.getElementById("lat").value;
var longitude = document.getElementById("long").value;
request.open('GET', 'https://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + '&units=imperial&appid=547fa6dfa44cff13fa92bba2c465b366', true);
request.send();
request.onreadystatechange = displayData;
}
function displayData() {
if(request.readyState === 4 && request.status === 200) {
var resultData = JSON.parse(request.responseText);
var location = document.getElementById("location")
var temperature = document.getElementById("temperature");
var windspeed = document.getElementById("windspeed");
var condition = document.getElementById("condition");
location.value = resultData.name +", " + resultData.sys.country;
temperature.value = resultData.main.temp + " degrees Fahrenheit";
windspeed.value = resultData.wind.speed + " miles per hour";
condition.value = resultData.weather.description;
document.getElementById("resultset").style.visibility = "visible";
}
}
// Create an event handler for when the btn button is clicked
window.onload = function() {
var btn = document.getElementById("btn");
btn.addEventListener("click", getWeather, false);
}
My HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta id="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header>
<h1>Weather Report</h1>
</header>
<article>
<h2>Weather Data</h2>
<table style="width:100%">
<tr>
<th><strong>City</strong></th>
<th><strong>Coordinates</strong></th>
</tr>
<tr>
<td>Batavia, OH, US</td>
<td>Latitude: 39.07859<br>
Longitude: -84.17941</td>
</tr>
<tr>
<td>Cincinnati, OH, US</td>
<td>Latitude: 39.10713<br>
Longitude: -84.50413</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
<form action="#" method="post" id="theForm" novalidate>
<fieldset id="coordinateset">
<label for="lat" id="latlabel">Latitude:</label>
<input id="lat" type="number" />
<label for="long" id="longlabel">Longitude:</label>
<input id="long" type="number" />
</fieldset><br><br>
<fieldset id="resultset">
<label for="location" id="locationlabel">Location:</label>
<input id="location" type="text" readonly />
<label for="temperature" id="temperaturelabel">Temperature:</label>
<input id="temperature" type="text" readonly />
<label for="windspeed" id="windspeedlabel">Wind Speed:</label>
<input id="windspeed" type="text" readonly />
<label for="condition" id="conditionlabel">Weather Condition:</label>
<input id="condition" type="text" readonly />
</fieldset>
</form>
<button id="btn">Submit Coordinates</button>
</article>
<script src="js/weather_report1.js"></script>
</body>
</html>
console.log(resultData)