CODEWITHSUNDEEP
javascriptjqueryopenweathermap
Eli Van Rock
Eli Van Rock

Reputation: 157

OpenWeatherMap.ORG API - $.getJSON doesn't work and I'm not recieving any data

I'm trying a test code for connecting to openweather.org with the providen api.

If I access to the url using my browser:

http://api.openweathermap.org/data/2.5/weather?id=2172797&APPID=35000cdad97645316c048563e4183021

Then, I get the proper Json: {"coord":{"lon":145.77,"lat":-16.92},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04n"}],"base":"stations","main":{"temp":289.26,"pressure":1013,"humidity":93,"temp_min":289.26,"temp_max":289.26},"wind":{"speed":1.61,"deg":116.5},"rain":{"3h":0.03},"clouds":{"all":76},"dt":1474367584,"sys":{"type":3,"id":10843,"message":0.1585,"country":"AU","sunrise":1474315673,"sunset":1474359164},"id":2172797,"name":"Cairns","cod":200}

The problem is that when I'm using the $.getJSON of jquery, I can't see any data.

Why is that ? How it can be solved ?

JS:

$(document).ready(function(){

  var api = 'http://api.openweathermap.org/data/2.5/weather?id=2172797&APPID=35000cdad97645316c048563e4183021';

   $.getJSON(api, {format:'json'},function(data){console.log(data.coord.lon)});


});

CodePen: https://codepen.io/elivanrock/pen/zKoYEj?editors=1011

Thanks in Advance!

Upvotes: 0

Views: 1281

Answers (1)

skobaljic
skobaljic

Reputation: 9614

You can get data using JSONp from openweathermap.com, just add your callback function this way:

http://api.openweathermap.org/data/2.5/weather?id=2172797&APPID=35000cdad97645316c048563e4183021&callback=myfunc

Example below:

$.ajax({
    url: "http://api.openweathermap.org/data/2.5/weather",
    jsonp: "callback",
    dataType: "jsonp",
    data: {
        id: "2172797",
        APPID: "35000cdad97645316c048563e4183021"
    },
    success: function( response ) {
        console.log( response ); // server response
        $('.current').html('<img src="http://openweathermap.org/img/w/' + response.weather[0].icon + '.png" /> ' + response.weather[0].main);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="current"></div>

Upvotes: 1

Related Questions