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

Answer 1

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.