Getting the real weather
You may want to get the REST Console for chrome to look at the REST responses from the REST service.
I have found that the easiest API to use is the Weather Underground implementation. You should read the documentation to familiarize yourself with the details. You will find sample code and a detailed description of the call format.
The following steps will help you to be successful in this lab.
- You will need to apply for an API key that will be placed into the URL to query the weather.
- Use this URL key to experiment with queries in the URL field of your browser. You should be able to enter something like
<![CDATA[
https://api.wunderground.com/api/APIKEY/geolookup/conditions/q/Utah/Provo.json
]]>
to see what will be returned in the JSON object.
- Use the ID tag on the DOM entry for the weather div to fill in the weather. In our example, the id is weather.
<![CDATA[
<p>Current Weather</p>
<div id="weather">No weather</div>
</li>
]]>
- In this example, we will be using the jquery ajax method to retrieve the content. Inside of the callback for the submit button, you can put something like this to test the ajax call.
<![CDATA[
var myurl= "https://api.wunderground.com/api/APIKEY/geolookup/conditions/q/UT/";
myurl += value;
myurl += ".json";
console.log(myurl);
$.ajax({
url : myurl,
dataType : "jsonp",
success : function(data) {
console.log(data);
}
}
]]>
You should be able to examine the json object to determine which fields are interesting to you.
- You can display any of them that you find important. For this example, we will look at the the city, current temperature, and current weather. Then we will update the weather id div with html we generate from this data.
<![CDATA[
var myurl= "https://api.wunderground.com/api/APIKEY/geolookup/conditions/q/UT/";
myurl += value;
myurl += ".json";
console.log(myurl);
$.ajax({
url : myurl,
dataType : "jsonp",
success : function(parsed_json) {
var location = parsed_json['location']['city'];
var temp_string = parsed_json['current_observation']['temperature_string'];
var current_weather = parsed_json['current_observation']['weather'];
everything = "<ul>";
everything += "<li>Location: "+location;
everything += "<li>Temperature: "+temp_string;
everything += "<li>Weather: "+current_weather;
everything += "</ul>";
$("#weather").html(everything);
}
});
]]>