I've been trying to access and retrieve weather data from OpenWeather using their API, but unfortunately, I'm facing some difficulties in getting it to work. It seems like there might be an issue with the way I am fetching the JSON data.
To query their data, I've used the following code snippet (you can find it on JSFiddle here):
function getWeather(lat, lon, callback) {
var weather = 'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&cnt=1';
$.ajax({
dataType: "jsonp",
url: weather,
success: callback
});
};
The query I made returned the following JSON response:
{
"coord":
{
"lon":-6.27,"lat":13.34
},
"sys":
{
"message":0.0088,
"country":"ML",
"sunrise":1390719134,
"sunset":1390760592
},
"weather":
[
{
"id":800,"main":"Clear",
"description":"Sky is Clear",
"icon":"01n"
}
],
"base":"cmc stations",
"main":
{"temp":293.154,
"temp_min":293.154,
"temp_max":293.154,
"pressure":989.21,
"sea_level":1024.43,
"grnd_level":989.21,
"humidity":64
},
"wind":
{
"speed":4.1,
"deg":52.0018
},
"clouds":
{
"all":0
},
"dt":1390695239,
"id":2451478,
"name":"Segou",
"cod":200
}
Next, I attempted to format the response like this:
var lat = 13.3428;
var lon = -6.26612;
getWeather(lat, lon, function (data) {
var tempHTML = "";
tempHTML = tempHTML + '<h3>WEATHER INFO:</h3>';
tempHTML = tempHTML + 'Weather data received <br/>';
tempHTML = tempHTML + '<h3>WEATHER:</h3>';
tempHTML = tempHTML + 'Weather Id: ' + data.weather[0].id + '<br/>';
tempHTML = tempHTML + 'Weather Main: ' + data.weather[0].main + '<br/>';
tempHTML = tempHTML + 'Weather Description: ' + data.weather[0].description + '<br/>';
tempHTML = tempHTML + 'Weather Icon: ' + data.weather[0].icon + '<br/>';
tempHTML = tempHTML + '<h3>MAIN:</h3>';
tempHTML = tempHTML + 'Temperature: ' + data.main[0].temp + 'degrees<br/>';
tempHTML = tempHTML + 'Temperature Min: ' + data.main[0].temp_min + 'degrees<br/>';
tempHTML = tempHTML + 'Temperature Max: ' + data.main[0].temp_max + 'degrees<br/>';
tempHTML = tempHTML + 'Pressure: ' + data.main[0].pressure + 'Kpa<br/>';
tempHTML = tempHTML + 'Humidity: ' + data.main[0].humidity + '%<br/>';
tempHTML = tempHTML + '<h3>WIND:</h3>';
tempHTML = tempHTML + 'Wind Speed: ' + data.wind[0].speed + 'kmh<br/>';
tempHTML = tempHTML + 'Wind Direction: ' + data.wind[0].deg + 'degrees <br/>';
tempHTML = tempHTML + '<h3>CLOUDS:</h3>';
tempHTML = tempHTML + 'Cloud Coverage: ' + data.clouds[0].all + '%<br/>';
document.getElementById('weather_output').innerHTML = tempHTML;
});
However, when running my code in the JSFiddle, I encountered a console error:
Uncaught SyntaxError: Unexpected token : api.openweathermap.org/data/2.5/weather?lat=13.3428&lon=-6.26612&cnt=1&callback=jQuery191009959305939264596_1390699334749&_=1390699334750:1
Uncaught TypeError: Cannot read property 'temp' of undefined (index):36