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:

- Extracting data from an HTML table
- YQLDataSource
- Basic Local Data (included with examples for AutoComplete Control)
- Basic Remote Data (included with examples for AutoComplete Control)
- Custom Formatting, with a Proxyless Remote DataSource (included with examples for AutoComplete Control)
- Customizing Remote Requests (included with examples for AutoComplete Control)
- Datatable with Autocomplete (included with examples for DataTable Control)
- Find Photos on Flickr (included with examples for AutoComplete Control)
- FunctionDataSource to Search Multiple Fields of an Address Book at Runtime (included with examples for AutoComplete Control)
- Inline Cell Editing (included with examples for DataTable Control)
- Integrating Browser History Manager with Server-side Pagination and Sorting (included with examples for DataTable Control)
- JSON Data Over XHR (included with examples for DataTable Control)
- Polling the DataSource (included with examples for DataTable Control)
- Progressive Enhancement (included with examples for DataTable Control)
- Screenreader Accessibility (included with examples for AutoComplete Control)
- Server-side Pagination and Sorting for Dynamic Data (included with examples for DataTable Control)
- Textual Data Over XHR (included with examples for DataTable Control)
- XML Data Over XHR With POST (included with examples for DataTable Control)
- XML Data with XPath (included with examples for DataTable Control)

### More DataSource Utility Resources:

- User's Guide (external)
- API Documentation

Copyright © 2009 Yahoo! Inc. All rights reserved.

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