YUI Library Home

Site Search (YDN & YUIBlog):

# 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.

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:

var ds = new YAHOO.util.YQLDataSource();

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.

initialRequest:'select * from flickr.photos.search where text = "YDN"'

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:

YAHOO.util.YQLDataSource = function (oLiveData, oConfigs) { oLiveData = oLiveData || 'http://query.yahooapis.com/v1/public/yql?format=json&q='; YAHOO.util.YQLDataSource.superclass.constructor.call(this, oLiveData, oConfigs); }; YAHOO.lang.extend(YAHOO.util.YQLDataSource, YAHOO.util.ScriptNodeDataSource, { responseType:YAHOO.util.DataSource.TYPE_JSON, parseJSONData: function ( oRequest , oFullResponse ) { var i,q = oFullResponse.query.results, rSch = this.responseSchema, fs = {}; if ('fields' in rSch && rSch.fields.length) { for (i = 0;i < rSch.fields.length;i++) { fs[rSch.fields[i].key || rSch.fields[i]] = i; } } else { rSch.fields = []; } var pushFields = function(node,prefix) { if (prefix) { prefix += '.'; } else { prefix = ''; } for (var field in node) { if (node.hasOwnProperty(field) && !(field in fs)) { if (YAHOO.lang.isObject(node[field])) { pushFields(node[field],prefix + field); } else { rSch.fields.push(prefix + field); } } } }; for (var list in q) { if (q.hasOwnProperty(list)) { rSch.resultsList = rSch.resultsList || 'query.results.' + list; pushFields(q[list][0]); return YAHOO.util.YQLDataSource.superclass.parseJSONData.apply(this,arguments); } } }, makeConnection : function(oRequest, oCallback, oCaller) { YAHOO.util.YQLDataSource.superclass.makeConnection.call(this,encodeURIComponent(oRequest),oCallback,oCaller); } }); YAHOO.lang.augmentObject(YAHOO.util.YQLDataSource, YAHOO.util.DataSourceBase);

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

YAHOO.util.Event.onDOMReady(function () { (new YAHOO.widget.DataTable( 'Container', [ {key:"id",label:"ID",resizeable:true}, {key:"owner",label:"Owner",resizeable:true}, {key:"title",label:"Title",resizeable:true}, {key:"img",label:"Photo", formatter: function(elCell, oRecord, oColumn, oData) { elCell.innerHTML = YAHOO.lang.substitute( '<img src="http://farm3.static.flickr.com/{server}/{id}_{secret}.jpg?v=0" width="80" height="80" />', oRecord.getData() ); }} ], new YAHOO.util.YQLDataSource(), { initialRequest:'select * from flickr.photos.search where text = "YDN"' } )); });

## 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:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### DataSource Utility Examples:

### More DataSource Utility Resources:

- User's Guide (external)
- API Documentation

Copyright © 2010 Yahoo! Inc. All rights reserved.

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