YQL YUI and JQuery

Last week i had been to Yahoo! hack day i came across an amazing tool called YQL -> “The Yahoo! Query Language is an expressive SQL-like language that lets you query, filter, and join data across Web services.” I tried few methods of representing the JSON data retrieved from the query using YUI and jQuery as below. Do share your methods in the comment section.

Data 1. Query :

select * from github.user.info where id='hemanth'

2.The REST query http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20github.user.info%20where%20id%3D’hemanth’&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys 3. JSON Output:

{
 "query": {
  "count": "1",
  "created": "2010-07-31T05:03:41Z",
  "lang": "en-US",
  "results": {
   "user": {
    "gravatar-id": "d32a6bf2b43bf62a7212f0c793d76319",
    "name": "hemanth",
    "company": null,
    "location": "India ",
    "created-at": {
     "type": "datetime",
     "content": "2008-07-24T14:46:55-07:00"
    },
    "public-repo-count": {
     "type": "integer",
     "content": "56"
    },
    "public-gist-count": {
     "type": "integer",
     "content": "15"
    },
    "blog": "www.h3manth.com",
    "following-count": {
     "type": "integer",
     "content": "24"
    },
    "id": {
     "type": "integer",
     "content": "18315"
    },
    "type": "User",
    "followers-count": {
     "type": "integer",
     "content": "2"
    },
    "login": "hemanth",
    "email": "[email protected]"
   }
  }
 }
}

Using jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] )

Case 1 : With single data as response.

$.getJSON(
    "REST_URL",
    function(data) { 
    user=data.query.results.user
     content = '<h2>Github (' + user.name + ')</h2>' +  
'URL: <a href="http://github.com/' + user.login + 
'">http://github.com/' + user.login + 
'</a><br>Public Repos: (' + 
user['public-repo-count'].content + ')
<br>Followers: (' + user['followers-count'].content + ')
<br>Following: (' + user['following-count'].content + ')'
 
$(content).appendTo("#info");

});

Note: Have a suitable div with id=“info”

Case 2: For multiple data as response.

$.getJSON(
    "URL",
    function(data) { 
    $.each(data.query.results, function(i,res){
    // Do the processing here 

    $(content).appendTo("#info"); 
    });          
});

Using YUI-YQL module: The main advantage here is we can set the query directly rather than the REST URL.

YUI({
  modules: {
    'gallery-yql':{
fullpath: 'http://yui.yahooapis.com/gallery-2010.01.27-20/
build/gallery-yql/gallery-yql-min.js',
requires: ['get','event-custom'],
    }
  }
}).use('node', 'gallery-yql', function(Y) {
    new Y.yql("select * from github.user.info where id='hemanth'
", function(response) {
        var data   = [];
      
        if (response.query.results) {
            var users    = response.query.results.story;
            // 1 in our case 
            var count    = news.length;

            // Loop through each data.
            for(var i=0; i < count; i++) {

            // Get each data.
             var info = users[i];

            // Create the HTML for each user
            data.push("<div class='info'>");
            data.push("<div>");
            data.push(''<h2>Github (' + user.name + ')</h2>' +  
'URL: <a href="http://github.com/' + 
user.login + 
'">http://github.com/' + 
user.login + 
'</a><br>Public Repos: 
(' +user['public-repo-count'].content +')
<br>Followers: (' + user['followers-count'].content + ')
<br>Following: ('+ user['following-count'].content + ')'')
            data.push("</div>");
            }    
            //Join all the data
            data = data.join('');
        }
        else {
            data = "Unable to fetch info";
        }

        // Insert it into the #tweets node
        Y.one("#info").set("innerHTML",data);
    });
});

Reference and Further reading : 1. YUI-YQL 2. YQL guide 3. jQuery.getJSON 4. yui3-architecture