Open weather map API , couldn't get JSON, but getting JSONP and couldnt make asynchronous call

Question

Am getting longitude and latitude values from google's webserivce and passing the values to open weather map api to get the temperature values. Code below

function getWeatherData(latitude, longitude) {
                            var temperature = 0;

                            var url = "http://api.openweathermap.org/data/2.5/weather?lat=";
                            url = url + latitude;
                            url = url + "&lon=";
                            url = url + longitude;
                            url = url + "&cnt=1";


                            $
                            .ajax({
                                type : "POST",
                                dataType : "jsonp",
                                url : url + "&callback=?",
                                async : false,
                                success : function(data) {
                                    temperature = data.list[0].main.temp ;
                                    alert (temperature);

                                },
                                error : function(errorData) {
                                    alert("Error while getting weather data :: "+errorData.status);
                                }
                            });

                            return temperature;

So for this URL

http://api.openweathermap.org/data/2.1/find/city?lat=22.572646&lon=88.36389500000001&cnt=1

Am getting the below JSON response properly in the browser

{
    "message": 0.016,
    "cod": "200",
    "calctime": "",
    "cnt": 1,
    "list": [{
        "id": 1275004,
        "name": "Kolkata",
        "coord": {
            "lon": 88.36972,
            "lat": 22.569719
        },
        "distance": 0.999,
        "main": {
            "temp": 301.15,
            "pressure": 998,
            "humidity": 88,
            "temp_min": 301.15,
            "temp_max": 301.15
        },
        "dt": 1371217800,
        "wind": {
            "speed": 3.1,
            "deg": 150
        },
        "clouds": {
            "all": 40
        },
        "weather": [{
            "id": 721,
            "main": "Haze",
            "description": "haze",
            "icon": "50n"
        }]
    }]
}

But while trying to hit the same using jQuery's ajax, I have no option except to get the values as JSONP, unable to get it as JSON

Since am unable to get JSON response, am not able to make the call asynchronous.

I need to make asynchronous false. Because of this every time, the value temperature is set to 0 and am not able to get the actual temperature value which i get from the ajax call

Please help

Welcome to the wonderful world of **async**! You need to return the value using a callback. — SLaks, Jun 14 '13 at 15:08
I need to make asynchronous false and this stops me to return the actual temperature value. Can you please help me saying how to do it actually ? — Arun, Jun 14 '13 at 15:11
^^^ What SLaks said! JSONP isn't "really" ajax, it inserts a script tag instead, so GET and async is the only way to do that, setting anything else in $.ajax is just ignored. — adeneo, Jun 14 '13 at 15:12
I couldn't understand. really sorry for that :( . so now how i will get the actual temperature value. The function always returns the value 0 as it is not waiting for the ajax call — Arun, Jun 14 '13 at 15:17
if the alert() works, simply cut and paste whatever you did after getWeatherData(..,..), into getWeatherData() inside the success() method. — dandavis, Jun 14 '13 at 15:33
it would make ajax call again ...!! in getWeatherData function, the ajax call is there .. do u mean to say that again in the success block, we have to write the code ?? not understanding :( — Arun, Jun 14 '13 at 15:48
Hi ...i have some quesries regarding the weather API as well. Which information do we use to show the weather icon with our data.? — Abhi, Jul 16 '14 at 05:36

Andrew Lively · Accepted Answer · 2014-01-29T01:40:28.023

If you're using JQuery then you could use a defer and promise. Something like this:

function getWeatherData(latitude, longitude) {
    var temperature = 0;
    var dfd = $.Deferred();
    var url = "http://api.openweathermap.org/data/2.5/weather?lat=";
    url += latitude;
    url += "&lon=";
    url += longitude;
    url += "&cnt=1";
    $.ajax({
        type: "POST",
        dataType: "jsonp",
        url: url + "&callback=?",
        async: false,
        success: function (data) {
            temperature = data.list[0].main.temp;
            alert(temperature);
            dfd.resolve(temperature);
        },
        error: function (errorData) {
            alert("Error while getting weather data :: " + errorData.status);
        }
    });
    return dfd.promise();
}

This will cause it to return the value once temperature has been resolved through the ajax call. I was using a weather API and had this same exact problem.

Open weather map API , couldn't get JSON, but getting JSONP and couldnt make asynchronous call

1 Answers1

Linked