The first part of implementing Yahoo Weather into your web page is connecting to the Yahoo web service using the REST interface. Using AJAX and the request method (request.open("GET", url, true)), you use the following URL to connect and retrieve the weather data. To get weather for your desired location, insert your desired zip code after "p=".
http://xml.weather.yahoo.com/forecastrss?p=48226. By clicking on the link you will see the weather displayed as an RSS feed. (Remember to use a web proxy to connect to the server when making your AJAX request)
The next part is getting the weather information retrieved from your request into your web page.
1. Create a div element into your .html page.
2. Parse the data and insert the weather information into your div element. Below is the code I have used to insert the weather information into your web page
Code Broken Down:
var xmlDoc = request.responseXML;
This line of code takes the response from the request and converts it into a Document Object Model (DOM) object
var title = xmlDoc.getElementsByTagName('description')[0].firstChild.nodeValue;
Returns the results from the first description tag in the xml file and saves it as a variable
var dateTime = xmlDoc.getElementsByTagName('lastBuildDate')[0].firstChild.nodeValue;
Returns the results from the lastBuildDate tag in the xml file and saves it as a variable
var description = xmlDoc.getElementsByTagName('description')[1].firstChild.nodeValue;
Returns the results from the second description tag in the xml file and saves it as a variable
document.getElementById("weather").innerHTML = + title + dateTime + description;
Outputs the variables previously saved into a div on your web page
The final Product will look like this
Enjoy!!
Hey Joshua, thanks for another detailed post on an API. Pat and I are looking at different weather APIs to implement into our project, and while we came across Yahoo's API which looks nice, we decided to continue looking for an API that not only gives current conditions but will also give a forecast. We noticed that the main difference between the different variety of weather APIs out there is the limitations at which the companies place on the information. This Yahoo weather API uses the The Weather Channel to gather it's info, and we checked out the Weather Channel's API since they have one as well, but it seems to only give current conditions and a one day forecast. Excellent post on getting this API working though, thanks for the details!
ReplyDeleteMatt,
ReplyDeleteSorry this couldn't have helped you a little further. I know weatherbug and the NOAA (national oceanic and atmospheric administration) each have an API that could help you.
Josh,
ReplyDeleteThanks for another informative write-up. I especially like the code breakdown/description that really help to clarify what is happening with the different lines of code and why. This is quite helpful to anyone beginning to work with API's, keep up the good work!
You always have great posts. This sounds interesting Thanks again. The API map blog was very helpful so thanks for that.
ReplyDeleteJosh, thanks for sharing the information on this weather API. As Matt mentioned, we have been looking at several different ones that are available. Since our group project includes travel information we thought it would be great to have detailed weather information available. I was quite surprised how many weather API's there are to choose from. Great Post!
ReplyDeleteJosh, thank you for this description. I think I will make a similar post for the ebay api soon!
ReplyDeleteI think this will help people as well
Hey Josh, it looks great! I may have to try this out one day! Thanks for breaking it down to how the API actually works!
ReplyDeleteHey Josh, like everyone else great post and thank you for a great discription of how to implement it.
ReplyDeleteJosh, thank you so much for the clear and step by step process of incorporating this API and others into our web pages. I have been going to various sites and tutorials but they still don't break it down in such a detailed a simple way to understand. This post and others have really helped me in putting this all together. Thanks again.
ReplyDelete