HTTP GET not getting

Question

Trying this but getting nothig

function getWeather() {
$.ajax({
  type: "GET",
  url: "http://api.openweathermap.org/data/2.5/weather?q=London",
    async: false,
    jsonpCallback: 'jsonCallback',
    contentType: "application/json",
    dataType: 'JSON',
    success: function(data)
    {
        $('#jsonp-results').html(JSON.stringify(data));
    },
    error: function(e)
    {
       alert(e.message);
    }

});
return data; //The JSON response whould be in this so that I can take this and can do some operation
}

On clicking button it should return the JSON

<body>
<button onclick="getWeather();">Get Weather</button>
</body>

Expected example JSON:

{"coord":{"lon":-0.13,"lat":51.51},"sys":{"type":1,"id":5168,"message":0.0287,"country":"GB","sunrise":1415603442,"sunset":1415636293},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}],"base":"cmc stations","main":{"temp":284.99,"pressure":1003,"humidity":76,"temp_min":283.75,"temp_max":286.15},"wind":{"speed":5.1,"deg":210},"clouds":{"all":75},"dt":1415624678,"id":2643743,"name":"London","cod":200}

I am not getting the mistake I have done.

EDIT

Tried with this from snippets given here:

<!DOCTYPE html>
<html>
<body>
<p id="temp"></p>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script language="javascript" type="text/javascript">
function getWeather() {
  data_Json = {};
  $.ajax({
    url: "http://api.openweathermap.org/data/2.5/weather?q=London",
    dataType: 'JSON',
    success: function(data) {
      //alert(JSON.stringify(data));
      data_Json = data;
      //alert("Weather Report: "+data_Json);
    },
    error: function(e) {
      alert(e.message);
    }
  });
  return data_Json;
}

function temp() {
  //getWeather();
  var obj = JSON.stringify(getWeather());
  //alert("Got"+JSON.stringify(obj));
  //alert(JSON.stringify(getWeather()));
  //document.getElementById("temp").innerHTML = obj.main.temp;
alert("Temp : "+obj);
  }
</script>
</body>
<body>
<button onclick="getWeather();">Get Weather</button>
<button onclick="temp();">Temperature</button>

</body>
</html>

It returned {} Not returned the JSON (the return defined in getWeather) Not the temperature (in get element by id part)

Related to http://stackoverflow.com/questions/5549068/json-how-do-i-make-cross-domain-json-call — David Brossard, Nov 10 '14 at 13:47

Tushar Nallan · Answer 1 · 2014-11-10T13:42:01.663

3

Remove contentType from your request and it will work fine.

Since this is a cross origin request, you cannot set contentType.

Following is the error you will see in your console -

XMLHttpRequest cannot load http://api.openweathermap.org/data/2.5/weather?q=London. Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

Also the statement return data; will fail as variable data is not available in that context.

You can use the below code for your purpose -

function getWeather() {
  weatherJson = {};
  $.ajax({
    type: "GET",
    url: "http://api.openweathermap.org/data/2.5/weather?q=London",
    async: false,
    jsonpCallback: 'jsonCallback',
    dataType: 'JSON',
    success: function(data) {
      $('#jsonp-results').html(JSON.stringify(data));
      weatherJson = data;
    },
    error: function(e) {
      alert(e.message);
    }

  });
  return weatherJson;
}

edited Nov 10 '14 at 13:42

answered Nov 10 '14 at 13:36

Tushar Nallan

784
6
16

As a matter of fact, to be able to run a cross site script, you need to use JSONP. Also see http://stackoverflow.com/questions/5549068/json-how-do-i-make-cross-domain-json-call – David Brossard Nov 10 '14 at 13:46
the return weatherJson returns {} not the JSON – ninja.stop Nov 10 '14 at 18:53
@anupam_on It would have, if async was set to true. But since its a synchronous call, the return will happen only after success function is called. – Tushar Nallan Nov 12 '14 at 14:15

Deepak Patel · Accepted Answer · 2014-11-11T08:19:25.360

You can try this solution

function getWeather() { 
data_Json = {};
$.ajax({
type: "GET",
url: "http://api.openweathermap.org/data/2.5/weather?q=London",
async: false,
dataType: 'JSONP',
success: function(data) {
  $('#jsonp-results').html(JSON.stringify(data));
  data_Json = data;
},
error: function(e) {
alert(e.message);
}
});
return data_Json;  }

For Edit Part:-

<!DOCTYPE html>
<html>
<body>
<p id="temp"></p>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script  type="text/javascript">
function getWeather() {
    data_Json = {};
    $.ajax({
        url: "http://api.openweathermap.org/data/2.5/weather?q=London",
        dataType: 'JSON',
        success: function (data) {
           data_Json = JSON.stringify(data);
        },
        error: function (e) {
            alert(e.message);
        }
    });
alert(data_Json);
return data_Json;
}
function temp() {
    var obj = getWeather();
   alert("Temp : " +obj);
}
</script>
<button onclick="getWeather();">Get Weather</button>
<button onclick="temp();">Temperature</button>

</body>

See edit part, the return data_Json actually holds nothing so when I execute and try to get data from another function, it gives nothing but {} — ninja.stop, Nov 10 '14 at 19:03

score 1 · Answer 3 · answered Nov 10 '14 at 13:29

    Hi See this,    
   function getWeather() {
    var returnData="";
    $.ajax({
      type: "GET",
      url: "http://api.openweathermap.org/data/2.5/weather?q=London",
        async: false,
        jsonpCallback: 'jsonCallback',
        contentType: "application/json",
        dataType: 'JSON',
        success: function(data)
        {
            $('#jsonp-results').html(JSON.stringify(data));
            returnData=data;
        },
        error: function(e)
        {
           alert(e.message);
        }

    });
    return data; //The JSON response whould be in this so that I can take this and can do some operation
    }

Hey you get data in success function ? i mean u just put alert in success function — karthik chitrothu, Nov 10 '14 at 14:14

score 1 · Answer 4 · 2014-11-10T13:36:55.237

Do you actually have an element with id="jsonp-results" in your html?

Some hints to simplify:

You don't need to specify a jsonp callback if you are not using jsonp
Synchronous calls are not nice because they block, you should avoid that and they aren't even supported for cross-domain calls (which your case is)

Simplified example:

function getWeather() {
  $.ajax({
    url: "http://api.openweathermap.org/data/2.5/weather?q=London",
    dataType: 'JSON',
    success: function(data) {
      $('#jsonp-results').html(JSON.stringify(data));
    },
    error: function(e) {
      alert(e.message);
    }
  });
}


<body>
<button onclick="getWeather();">Get Weather</button>
<div id="jsonp-results"></div>
</body>

After your comment: It certainly works: http://codepen.io/anon/pen/MYgXzd

You must have something wrong in your setup.

HTTP GET not getting

4 Answers4