YUI Library Home

YUI Library Examples: DataSource Utility: YQLDataSource

DataSource Utility: YQLDataSource

Inspired by Jonathan LeBlanc's article on the YUI Blog, the YQLDataSource class makes it easier to use YQL data in DataTable, Charts, or AutoComplete. The DataTable below is built using the YQLDataSource class.

View example in new window.

ID
Owner
Title
Photo
Loading...

The YQLDataSource constructor does not require any parameters. It automatically uses the Get utility, a required dependency, to access the YQL servers and retrieve JSON data into a callback. The YQLDataSource just needs to be instantiated like this:

1var ds = new YAHOO.util.YQLDataSource(); 
view plain | print | ?

There is no need to indicate the server, responseType, or responseSchema, which will all be defined for you. The responseType will always be of type JSON and the responseSchema.resultsList will always point to the very first repeating element under query.results.

To integrate with DataTable, the YQL query string has been set in the initialRequest configuration attribute. All returned fields of all returned results will be copied to the in-memory RecordSet, so care should be taken accessing queries whose results may require a lot of memory.

1initialRequest:'select * from flickr.photos.search where text = "YDN"' 
view plain | print | ?

The YQL response itself provides no indication of the data type of the individual fields at this time. So by default, all fields will be read as strings, but if any field needs to be parsed, you can specify those fields in the usual responseSchema.fields = [ ..., {key:"xxxx",parser:"date"},...] manner. Actually, all fields in the result set will be parsed, so you only really need to specify those that need a parser -- all the rest will be added to the fields array and read as strings automatically.

The YQLDataSource class extends the ScriptNodeDataSource class:

1YAHOO.util.YQLDataSource = function (oLiveData, oConfigs) { 
2    oLiveData = oLiveData || 'http://query.yahooapis.com/v1/public/yql?format=json&q='; 
3    YAHOO.util.YQLDataSource.superclass.constructor.call(this, oLiveData, oConfigs); 
4}; 
5 
6YAHOO.lang.extend(YAHOO.util.YQLDataSource, YAHOO.util.ScriptNodeDataSource, { 
7    responseType:YAHOO.util.DataSource.TYPE_JSON, 
8    parseJSONData: function  ( oRequest , oFullResponse ) { 
9        var i,q = oFullResponse.query.results, 
10            rSch = this.responseSchema, 
11            fs = {}; 
12 
13        if ('fields' in rSch  && rSch.fields.length) { 
14            for (i = 0;i < rSch.fields.length;i++) { 
15                fs[rSch.fields[i].key || rSch.fields[i]] = i; 
16            } 
17        } else { 
18            rSch.fields = []; 
19        } 
20        var pushFields = function(node,prefix) { 
21            if (prefix) { 
22                prefix += '.'; 
23            } else { 
24                prefix = ''; 
25            } 
26            for (var field in node) { 
27                if (node.hasOwnProperty(field) && !(field in fs)) { 
28                    if (YAHOO.lang.isObject(node[field])) { 
29                        pushFields(node[field],prefix + field); 
30                    } else { 
31                        rSch.fields.push(prefix + field); 
32                    } 
33                } 
34            } 
35        }; 
36 
37        for (var list in q) { 
38            if (q.hasOwnProperty(list)) { 
39                rSch.resultsList = rSch.resultsList || 'query.results.' + list; 
40                pushFields(q[list][0]); 
41                return YAHOO.util.YQLDataSource.superclass.parseJSONData.apply(this,arguments); 
42            } 
43        } 
44    }, 
45    makeConnection : function(oRequest, oCallback, oCaller) { 
46        YAHOO.util.YQLDataSource.superclass.makeConnection.call(this,encodeURIComponent(oRequest),oCallback,oCaller); 
47    } 
48}); 
49 
50YAHOO.lang.augmentObject(YAHOO.util.YQLDataSource, YAHOO.util.DataSourceBase); 
view plain | print | ?

Once the YQLDataSource class definition has been loaded, you can add code to create the DataTable:

1YAHOO.util.Event.onDOMReady(function () { 
2 
3    (new YAHOO.widget.DataTable( 
4        'Container', 
5        [ 
6            {key:"id",label:"ID",resizeable:true}, 
7            {key:"owner",label:"Owner",resizeable:true}, 
8            {key:"title",label:"Title",resizeable:true}, 
9            {key:"img",label:"Photo", formatter: function(elCell, oRecord, oColumn, oData) { 
10                elCell.innerHTML = YAHOO.lang.substitute( 
11                    '<img src="http://farm3.static.flickr.com/{server}/{id}_{secret}.jpg?v=0" width="80" height="80" />', 
12                    oRecord.getData() 
13                ); 
14            }} 
15        ], 
16        new YAHOO.util.YQLDataSource(), 
17        { 
18            initialRequest:'select * from flickr.photos.search where text = "YDN"' 
19        } 
20    )); 
21}); 
view plain | print | ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

Logger Console

INFO 215ms (+0) 7:38:41 PM:
DataSource  instance0
DataSource is querying URL http://query.yahooapis.com/v1/public/yql?format=json&q=select%20*%20from%20flickr.photos.search%20where%20text%20%3D%20%22YDN%22&callback=YAHOO.util.ScriptNodeDataSource.callbacks[0]
INFO 215ms (+4) 7:38:41 PM:
DataSource  instance0
Making connection to live data for "select * from flickr.photos.search where text = "YDN""
INFO 211ms (+28) 7:38:41 PM:
DataSource  instance0
DataSource initialized
INFO 183ms (+183) 7:38:41 PM:
LogReader  instance0
LogReader initialized
INFO 0ms (+0) 7:38:40 PM:
global
Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More DataSource Utility Resources:

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings