<script
src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D%22http%3A%2F%2Frss.news.yahoo.com%2Frss%2Ftopstories%22&format=json&callback=cbfunc">
* The Yahoo! Developer Console is found at this URL: http://developer.yahoo.com/yql/console/#h=select%20*%20from%20rss%20where%20url%3D%22http%3A//rss.news.yahoo.com/rss/topstories%22
First YQL Application
Time Required: 10 min.
Introduction
This tutorial shows how to create a simple Web application that uses YQL to fetch an RSS feed. The call
to YQL is made within an HTML script tag, and the returned JSON response is parsed with JavaScript.
Setting Up the Example
1. From your Web server, create a new file called yql_news_app.html.
2. Copy the HTML below into yql_news_app.html. The src attribute in the second script tag is
given an empty value intentionally. We will assign a YQL statement to src later.
<html>
<head><title>YQL and RSS: Yahoo! Top News Stories</title>
<style type='text/css'>
#results{ width: 40%; margin-left: 30%; border: 1px solid gray;
padding: 5px; height: 200px; overflow: auto; }
</style>
<script type='text/javascript'>
// Parses returned response and extracts
// the title, links, and text of each news story.
function top_stories(o){
var items = o.query.results.item;
var output = '';
var no_items=items.length;
for(var i=0;i<no_items;i++){
var title = items[i].title;
var link = items[i].link;
var desc = items[i].description;
output += "<h3><a href='" + link + "'>"+title+"</a></h3>" +
desc + "<hr/>";
}
// Place news stories in div tag
document.getElementById('results').innerHTML = output;
}
</script>
</head>
<body>
<!-- Div tag for stories results -->
<div id='results'></div>
<!-- The YQL statment will be assigned to src. -->
<script src=''></script>
</body>
</html>
Yahoo! Developer Network 6 April 18, 2011
YQL Tutorials and Code Examples
3. Run the example query get rss feed from yahoo top stories1 in the YQL Console. Select the JSON radio
button and click TEST.
You should see the returned JSON response on the Formatted View tab.
4. In the YQL statement, replace the word "title" with an asterisk "*". Click TEST.
The asterisk will return all of the fields (rows) of the response.
5. From the returned JSON response, find the results object. Notice that within the results object, there
is the array item containing objects with the title, link, and description of each news article.
6. Click Copy URL. From yql_news_app.html, paste the URL into the src attribute of the second
script tag as seen below:
<body>
<div id='results'></div>
<script
src='http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D%22http%3A%2F%2Frss.news.yahoo.com%2Frss%2Ftopstories%22&format=json&callback=cbfunc'>
</script>
</body>
Notice that the YQL statement has been URL-encoded and the format parameter specifies that the
response be in JSON.
7. At the end of the URL, replace the callback value 'cbfunc' with 'top_stories'.
The new callback function top_stories will be called as soon as YQL returns the response and
have access to the returned JSON.
8. Point your browser to yql_news_app.html. Your YQL News Application should resemble the
figure below.
http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D%22http%3A%2F%2Frss.news.yahoo.com%2Frss%2Ftopstories%22&diagnostics=true
