weather-thumb

Get current weather info from a free API using jQuery and AJAX

There are very few online services which provide in-depth and up-to-date weather information for free.
In this short tutorial, we will be looking at one such free API provided by worlweatheronline.com and fetching the data using jQuery and AJAX.

Overview

World Weather Online provides a weather API for developers and programmers for free.
You just have to register to get your unique API key that you can then use to request weather data from their servers.
The weather data is available in 3 formats, namely JSON,XML and CSV which can be set while building the query string.
For this tutorial we will be using the JSON format.
To get started, head over to World Weather Online and register for an API key.
Once you have received your API key, proceed further

Fetching JSON weather data using JavaScript

For querying weather data we will be using the jQuery library’s get() method which itself is a short form of the more complex ajax() method.
The URI of weather API is:


http://free.worldweatheronline.com/feed/weather.ashx

Parameters:

  • q : The location to get data for, it can be a city name, US postal code, IP address or geographic co-ordinates
  • key : Your secret API key
  • format : json, xml or csv
  • no_of_days : No of days for forecast data
  • includeLocation

Setting up URI with parameters

// options :
var my_city="Washington,USA";
var my_key="xxxxxxxxxxxxxxxxxxxxxx";
var no_of_days=2;
// build URI:
var uri="http://free.worldweatheronline.com/feed/weather.ashx?q="+my_city+"&key="+my_key+"&format=json&no_of_days="+no_of_days+"&includeLocation=yes";
// uri-encode it to prevent errors :
uri=encodeURI(uri); 

Querying for weather data

Now since our URI is ready, we will query the server using jQuery’s AJAX function and do stuff with the returned data:

jQuery.get(uri,function(r){},"json");

Here is the code broken-down:

  • The first parameter of the get() method is the URI to query from.
  • The second parameter is a call-back function which is executed if the query was successful, the returned data is available in r variable withing the scope of the call-back function.
  • The third parameter is obviously the data-type expected from server, jQuery will intelligently guess the data-type if it is not provided but it is always a good habit to tell it in advance what to expect.
    Note: if your query fails for no apparent reason, try using “jsonp” as data type instead of “json”.

The returned data

The returned json data looks something like this:

{ "data": { "current_condition": [ {"cloudcover": "75", "humidity": "76", "observation_time": "10:27 AM", "precipMM": "0.0", "pressure": "1024", "temp_C": "8", "temp_F": "46", "visibility": "16", "weatherCode": "116",  "weatherDesc": [ {"value": "Partly Cloudy" } ],  "weatherIconUrl": [ {"value": "http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0004_black_low_cloud.png" } ], "winddir16Point": "N", "winddirDegree": "350", "windspeedKmph": "15", "windspeedMiles": "9" } ],  "nearest_area": [ { "areaName": [ {"value": "Washington" } ],  "country": [ {"value": "United States Of America" } ], "latitude": "38.895", "longitude": "-77.037", "population": "552433",  "region": [ {"value": "District Of Columbia" } ],  "weatherUrl": [ {"value": "http:\/\/www.worldweatheronline.com\/Washington-weather\/District-of-Columbia\/US.aspx" } ] } ],  "request": [ {"query": "Washington, United States Of America", "type": "City" } ],  "weather": [ {"date": "2012-10-08", "precipMM": "0.0", "tempMaxC": "11", "tempMaxF": "52", "tempMinC": "7", "tempMinF": "44", "weatherCode": "116",  "weatherDesc": [ {"value": "Partly Cloudy" } ],  "weatherIconUrl": [ {"value": "http:\/\/www.worldweatheronline.com\/images\/wsymbols01_png_64\/wsymbol_0002_sunny_intervals.png" } ], "winddir16Point": "N", "winddirDegree": "10", "winddirection": "N", "windspeedKmph": "13", "windspeedMiles": "8" } ] }}

Extracting data elements from the returned json data

    // Name of nearest area :
    nearest_area    =r.data.nearest_area[0].region[0].value;
    
    // Name of country :
    country         =r.data.nearest_area[0].country[0].value;
    
    // Current temperature in fahrenheit and celsius:
    current_temp_F  =r.data.current_condition[0].temp_F;
    current_temp_C  =r.data.current_condition[0].temp_C;
    
    // A short description of current  weather conditions:
    current_condition=r.data.current_condition[0].weatherDesc[0].value;
    
    // Max/Min temperature in fahrenheit
    max_temp_F      =r.data.weather[0].tempMaxF;
    min_temp_F      =r.data.weather[0].tempMinF;
    
    // Max/min temperature in celsius:
    max_temp_C      =r.data.weather[0].tempMaxC;
    min_temp_C      =r.data.weather[0].tempMinC;
    
    //Humidity in %
    humidity        =r.data.current_condition[0].humidity;
    
    // Precipitation in mm :
    precipitation   =r.data.current_condition[0].precipMM;
    
    // Pressure in millibars:
    pressure        =r.data.current_condition[0].pressure;
    
    // Wind speed in kmph
    wind_speed_kmph =r.data.current_condition[0].windspeedKmph;
    
    // Wind speed in mph
    wind_speed_mph  =r.data.current_condition[0].windspeedMiles;
    
    // Wind direction degree (0 degree corresponds with North)
    wind_dir        =r.data.current_condition[0].winddirDegree;

Error handling

If the query fails because of authentication error or if the location queried is not available, the response looks something like this:

// if location is invalid :
{ "data": { "error": [ {"msg": "Unable to find any matching weather location to the query submitted!" } ] }}

// if API key is invalid :
{ "data": { "error": [ {"msg": "User account does not exist. Please go to http:\/\/www.worldweatheronline.com\/register.aspx and register for an API Key or contact support team at info@worldweatheronline.com" } ] }}

In both the cases, the data.error object is common in the response, so in our call-back function, we can first check for existence of this error object and display the error if it exists:

jQuery.get(uri,function(r){

 if(r.data.error) {

  // error exists, so display it
  alert(r.data.error[0].msg);

  } else {

   // no error
   // do normal stuff

 }//end if

},"jsonp"); // end jQuery.get()

Limitations of the free API and java-script implementation

  • The free API only allows a maximum of 500 requests per hour, so if you use this API on a high traffic site, you would quickly run out of allowed requests per hour since java-script will make a query each time the page loads. In that case it would be advisable to sign up for their premium weather API which is paid and has no limits on queries per hour, or you can use php CURL library to fetch the data on the server side and display it on the client side, you could set up the php script to query the weather API at specific times and save it to a database/flat-file on your server to ensure the data you are displaying to your users is up-to-date.
  • Your secret API key can easily be copied by anybody since it is part of the java-script code itself which is visible on the client-side.

3 responses to this entry

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

2018 All rights reserved | Powered by WordPress
Back to top
Theme by dynamicguru.com