Using weather API with JSON and JavaScript/jQuery

Question

I've found this free weather API that gives you a forecast when you send an HTTP GET request - the forecast is delivered in JSON. A request could look like this:

Examples of JSON format:
Seaching by city name: api.openweathermap.org/data/2.5/weather?q=London,uk
Seaching by geographic coordinats: api.openweathermap.org/data/2.5/weather?lat=35&lon=139 Seaching by city ID: api.openweathermap.org/data/2.5/weather?id=2172797

So the response you get back is obviously defined by the end of the url, where some variables are located.

I've seen that you can use the jQuery function getJSON() to create an object out of the text file you get with an HTTP GET request, and you can also use variables with it to change the url. For an example doing this:

var person = "john";
$.getJSON("https://graph.facebook.com/" + person, function(person){

    $.each(person, function(key, value){
        document.write(key+": "+value+"<br />"); 
    });
});

Gives the output

id: 779695190
first_name: John
gender: male
last_name: Chan
locale: en_US
name: John Chan
username: John

However, when I try to use this with the weather API it doesn't work - there is no output. (Doing it without url-variables here for simplicity.) The below code is how I thought it would be done (but apparantly not).

$.getJSON("api.openweathermap.org/data/2.5/weather?q=London,uk", function(forecast){
    var temperature = forecast.main.temp;
    document.write(temperature);
});

See the JSON structure for the forecast here: http://bugs.openweathermap.org/projects/api/wiki/Weather_Data

So basically my questions are: How would I append the url-variables to the weather-api-urls (and making sure the request can be both city name or coordinates)? And how would I access the retrieved data once I got it from the server?

Maybe you're getting an exception? Add an error handler! Also, does the openweathermap api support CORS? — Bergi
– Bergi, Commented May 4, 2014 at 13:43
@Bergi I'm pretty new to this, what are exceptions? And how would you suggest I'd implement error handling here? I don't know if it does support CORS, and I've never used that. Here is the main site if you want to know more about the API: openweathermap.org/API Also, try visiting the link api.openweathermap.org/data/2.5/weather?q=London,uk and you will see that it works to just see the JSON in the browser. — Axel K
– Axel K, Commented May 4, 2014 at 13:47
If $.getJSON("https://graph.facebook.com/" has worked for you, you've already used CORS. On how to use an error handler check the jQuery docs, but an error message should also have shown up in your console already. — Bergi
– Bergi, Commented May 4, 2014 at 13:50
The openweathermap api does not seem to support cors, but JSONP. Add &callback=? to your url and jQuery can handle it. — Bergi
– Bergi, Commented May 4, 2014 at 13:51
@Bergi I got it working without "&callback=?" using a static url in the getJSON() function. But for some reason when I try to use coordinates they become "undefined" when put in the url, even though they appear correctly in the HTML. — Axel K
– Axel K, Commented May 4, 2014 at 14:06

Irfan Syed · Accepted Answer · 2016-03-28 13:34:44Z

first you can read the lat & long values or the zip code or city ID and then can append them by calling the functions which includes the ajax to call the api wrt to the given parameter.See below i have tried it using just the lat long values from the browser.after getting the results you can access them like any other json object.

function success(position) {
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
    var timstp = position.timestamp;
    var myDate = new Date(timstp).toLocaleString();
    //console.log("Lat="+lat+"Long="+long+"timstp="+timstp+"date="+myDate); 

    $.ajax({
      url: "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + long + "&appid=690660b930904f0cee1975853d5a2375",
      dataType: 'jsonp',
      success: function(results) {
        console.log(results);

   
      }
    });
}

Devima · Accepted Answer · 2014-05-04 15:49:34Z

0

Probably i have not uderstand your answer correctly but if you want append a variable in url for openweathermap api the code is:

<script type="text/javascript">
$(document).ready(function(){
var variable='London'
$.getJSON("http://api.openweathermap.org/data/2.5/weather?q="+variable+",uk&callback", function(data){  
    console.log(data)
    console.log(data.main.temp_min)
    console.log(data.main.temp_max)
});

})
</script>

answered May 4, 2014 at 15:49

Devima

1,5662 gold badges10 silver badges16 bronze badges

3 Comments

Bergi Over a year ago

That's missing proper URL-encoding. Why not just use $.getJSONs data parameter?

Devima Over a year ago

@Bergi:Perhaps i am ignorant on the subject but i don't understand what are $.getJSONs data parameter? Please can you explain better?

Bergi Over a year ago

The data parameter to $.getJSON: $.getJSON("http://api.openweathermap.org/data/2.5/weather?callback=?", {q:variable+",uk"}, function(data){…})

Collectives™ on Stack Overflow

Using weather API with JSON and JavaScript/jQuery

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related