I am having difficulty setting up a simple html file using javascript to display the results of YQL Query.
I understand how to setup the select statement (example: select title,abstract,url from search.web where query="pizza") in the YQL Console. But I don't know how to display it on the html file?
Can somebody help in explaining how to display the results of that statement? Code snippets would be appreciated!
BTW, I've read the YQL Docs but they are somewhat complicated.
The only way to retrieve YQL results via client-side JavaScript is JSON-P (or by using an additional proxy). Here's a wrapper for the YQL service:
function YQLQuery(query, callback) {
this.query = query;
this.callback = callback || function(){};
this.fetch = function() {
if (!this.query || !this.callback) {
throw new Error('YQLQuery.fetch(): Parameters may be undefined');
}
var scriptEl = document.createElement('script'),
uid = 'yql' + +new Date(),
encodedQuery = encodeURIComponent(this.query.toLowerCase()),
instance = this;
YQLQuery[uid] = function(json) {
instance.callback(json);
delete YQLQuery[uid];
document.body.removeChild(scriptEl);
};
scriptEl.src = 'http://query.yahooapis.com/v1/public/yql?q='
+ encodedQuery + '&format=json&callback=YQLQuery.' + uid;
document.body.appendChild(scriptEl);
};
}
Usage:
// Construct your query:
var query = "select * from rss where url='somefeed.com' limit 1";
// Define your callback:
var callback = function(data) {
var post = data.query.results.item;
alert(post.title);
};
// Instantiate with the query:
var firstFeedItem = new YQLQuery(query, callback);
// If you're ready then go:
firstFeedItem.fetch(); // Go!!
More info: http://james.padolsey.com/javascript/using-yql-with-jsonp/
Here is a small example for you. I made it using the YQL website:
<html>
<head>
</head>
<body>
<script>
function top_stories(o){
// parse through the output here:
var items = o.query.results.item;
// do whatever you want with the output here:
console.log(items[0].title);
}
</script>
<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&diagnostics=false&callback=top_stories'></script>
</body>
</html>
All it does it get the very first news story from Yahoo!'s front page
