CODEWITHSUNDEEP
jsonhttpget
ninja.stop
ninja.stop

Reputation: 430

HTTP GET not getting

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)

Upvotes: 0

Views: 295

Answers (4)

Deepak Patel
Deepak Patel

Reputation: 474

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>

Upvotes: 2

Tushar Nallan
Tushar Nallan

Reputation: 784

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;
}

Upvotes: 3

user2226112
user2226112

Reputation:

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.

Upvotes: 1

karthik chitrothu
karthik chitrothu

Reputation: 13

    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
    }

Upvotes: 1

Related Questions