0

I am accessing OpenWeather data using their API, and have not successfully got it working. I think I am accessing the JSON incorrectly but have not cracked it.

I am using the following code JSFiddle here) to query their data:

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 run returns this:

{
 "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
}

I am then trying to format their 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').innerHTM = tempHTML;
    });

And if you look at my JSFiddle I get a console error of:

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
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
TheRealPapa
  • 4,393
  • 8
  • 71
  • 155
  • You are also accessing some properties incorrectly. For instance you should be accessing `data.sys.country` not `data.sys[0].country`. You do this throughout your code. – Jared Eitnier Jan 26 '14 at 01:27
  • [It does, @FelixKling](http://api.openweathermap.org/data/2.5/weather?q=London,uk&callback=jsonp). – Andy Jan 26 '14 at 01:28
  • @Andy: Mmh, then the error message `Uncaught SyntaxError: Unexpected token :` doesn't make sense or is unrelated. *edit:* Hmm, it didn't make a JSOP request the first time I loaded the fiddle in Chrome, but it does when I run it again weird. Anyways, I will delete my first comment. – Felix Kling Jan 26 '14 at 01:30
  • stop fixing things here and fix how you access `data` :) – Jared Eitnier Jan 26 '14 at 01:33
  • Hahaha thanks Jared I was fixing the layout of the JSON so I could make sense of what you guys were saying back to me. no need, Gaby showed me how. Thanks all! – TheRealPapa Jan 26 '14 at 01:45
  • possible duplicate of [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json) – Felix Kling Jan 26 '14 at 01:47

1 Answers1

0

If you look at the returned json, the main key points to an object and not an array, so using [0] causes the error.

Use data.main.temp instead..

The same goes for the wind, sys and cloud properties..

Finally, you are missing the final L in innerHTML at the end..

Demo with all fixes at http://jsfiddle.net/KLtLD/17/

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317