INFO 343 Web Technologies

Will Terry see cycling on TV tomorrow?

I bike to the UW from Shoreline most days and love to drink beer as I watch professional bicycle racing: The Tour de France, etc.

The only problem is that I have to visit Cycling Upcoming to see the upcoming television schedule. Why waste time surfing the web when I could be out spinning my wheels?

My life would be simplified if I could use JSONP to fetch tomorrow television broadcast information and display it on my webpage automatically.


Here is a screen grab of the TV schedule for April 21, 2011 at Cycling Show Schedule and Times. I want to know that on April 22, 2011 on the channel WRCDT3 at 3:30 am there will be an episode of the Tour of the Basque Country.



Testing the query at the YQL console

You can submit the following query at the YQL console to produce a JSON object that has all the information you need.

If you view the film for this page, you'll see me using FireBug to expose the structure of the page. The XPath used here will return an array of "rowOdds" and "whiteBorders". We can index into these arrays to get the first one in the array, i.e., tomorrow's information.

select * from html where url = "http://television.aol.com/show/cycling/62437/upcoming" and 
xpath = "//div[@class='rowOdd']/div[@class='whiteBorder']"

Here is a partial view of the JSON object that this command produces.


You have to index into the JSON object to pluck out the information you need. For example, this jQuery command should give you the date information.

  $('#ID_of_your_HTML_element').text("Date: " + json.query.results.div[0].div[0].div[0].strong);

Here's the cycling information!

I can use JSONP to harvest the information from the Cycling page and then present it in order: Date, Time, Channel and Content with the appropriate labels.