---
title: "YQL YUI and JQuery"
description: "Data 1. Query : select from github.user.info where id=’hemanth’ 2.The REST query... Practical notes and code examples on."
url: "https://h3manth.com/scribe/yql-yui-and-jquery/"
canonical_url: "https://h3manth.com/scribe/yql-yui-and-jquery/"
markdown_url: "https://h3manth.com/scribe/blog/yql-yui-and-jquery.md"
publishDate: "2010-07-31T00:00:00.000Z"
author: "Hemanth HM"
category: "javascript"
tags: ["javascript","git","database","web"]
word_count: 421
reading_time_minutes: 3
x_markdown_tokens: 1259
content_signal: "ai-train=yes, search=yes, ai-input=yes"
---

# YQL YUI and JQuery

> Data 1. Query : select from github.user.info where id=’hemanth’ 2.The REST query... Practical notes and code examples on.

###  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": "hemanth.hm@gmail.com"
       }
      }
     }
    }
    

**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](http://github.com/hemanth/yui-yql) 2\. [YQL guide](http://developer.yahoo.com/yql/guide/) 3\. [jQuery.getJSON](http://api.jquery.com/jQuery.getJSON/) 4\. [yui3-architecture](http://yuiblog.com/assets/pdf/yui3architecture.pdf)