YUI Library Home

YUI Library Examples: DataTable Control: JSON Data Over XHR

DataTable Control: JSON Data Over XHR

This example populates a DataTable with data received via XHR from the Yahoo! Local webservice.

View example in new window.

Phone
City
Loading...

Sample Code for this Example

Data:

1{"ResultSet":{ 
2    "totalResultsAvailable":665, 
3    "totalResultsReturned":10, 
4    "firstResultPosition":1, 
5    "ResultSetMapUrl":"http:\/\/local.yahoo.com\/mapview?stx=pizza&csz=Sunnyvale%2C+CA+94089&city=Sunnyvale&state=CA&radius=15&ed=9brhZa131DwigChqKlCo22kM1H_9WgoouCr87Ao-", 
6    "Result":[{ 
7        "Title":"Pizza Depot", 
8        "Address":"919 E Duane Ave", 
9        "City":"Sunnyvale", 
10        "State":"CA", 
11        "Phone":"(408) 245-7760", 
12        "Latitude":"37.388537", 
13        "Longitude":"-122.003972", 
14        "Rating":{ 
15            "AverageRating":"3.5", 
16            "TotalRatings":"5", 
17            "TotalReviews":"5", 
18            "LastReviewDate":"1161495667"}, 
19        "Distance":"0.93", 
20        "Url":"http:\/\/local.yahoo.com\/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--", 
21        "ClickUrl":"http:\/\/local.yahoo.com\/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--", 
22        "MapUrl":"http:\/\/maps.yahoo.com\/maps_result?name=Pizza+Depot&desc=4082457760&csz=Sunnyvale+CA&qty=9&cs=9&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--&gid1=21332021", 
23        "BusinessUrl":"http:\/\/pizza-depot.com\/", 
24        "BusinessClickUrl":"http:\/\/pizza-depot.com\/"}, 
25 
26        ... 
27    ]} 
28} 
view plain | print | ?

CSS:

1/* No custom CSS. */ 
view plain | print | ?

Markup:

1<div id="json"></div> 
view plain | print | ?

JavaScript:

1YAHOO.util.Event.addListener(window, "load", function() { 
2    YAHOO.example.XHR_JSON = new function() { 
3        this.formatUrl = function(elCell, oRecord, oColumn, sData) { 
4            elCell.innerHTML = "<a href='" + oRecord.getData("ClickUrl") + "' target='_blank'>" + sData + "</a>"; 
5        }; 
6 
7        var myColumnDefs = [ 
8            {key:"Title", label:"Name", sortable:true, formatter:this.formatUrl}, 
9            {key:"Phone"}, 
10            {key:"City"}, 
11            {key:"Rating.AverageRating", label:"Rating", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true} 
12        ]; 
13 
14        this.myDataSource = new YAHOO.util.DataSource("assets/php/ylocal_proxy.php?"); 
15        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; 
16        this.myDataSource.connXhrMode = "queueRequests"; 
17        this.myDataSource.responseSchema = { 
18            resultsList: "ResultSet.Result", 
19            fields: ["Title","Phone","City",{key:"Rating.AverageRating",parser:"number"},"ClickUrl"] 
20        }; 
21 
22        this.myDataTable = new YAHOO.widget.DataTable("json", myColumnDefs, 
23                this.myDataSource, {initialRequest:"query=pizza&zip=94089&results=10&output=json"}); 
24 
25        var myCallback = function() { 
26            this.set("sortedBy", null); 
27            this.onDataReturnAppendRows.apply(this,arguments); 
28        }; 
29        var callback1 = { 
30            success : myCallback, 
31            failure : myCallback, 
32            scope : this.myDataTable 
33        }; 
34        this.myDataSource.sendRequest("query=mexican&zip=94089&results=10&output=json", 
35                callback1); 
36 
37        var callback2 = { 
38            success : myCallback, 
39            failure : myCallback, 
40            scope : this.myDataTable 
41        }; 
42        this.myDataSource.sendRequest("query=chinese&zip=94089&results=10&output=json", 
43                callback2); 
44    }; 
45}); 
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 3257ms (+0) 5:36:10 AM:
DataSource  instance0
Making connection to live data for "query=chinese&zip=94089&results=10&output=json"
INFO 3257ms (+2) 5:36:10 AM:
DataSource  instance0
Making connection to live data for "query=mexican&zip=94089&results=10&output=json"
INFO 3255ms (+0) 5:36:10 AM:
DataSource  instance0
Making connection to live data for "query=pizza&zip=94089&results=10&output=json"
INFO 3255ms (+1) 5:36:10 AM:
DataTable  instance yui-dt0
DataTable showing message: Loading...
WARN 3254ms (+0) 5:36:10 AM:
DataTable  instance yui-dt0
Could not find DragDrop for resizeable Columns
INFO 3254ms (+2) 5:36:10 AM:
DataTable  instance yui-dt0
TH cells for 4 keys created
INFO 3252ms (+0) 5:36:10 AM:
RecordSet  instance yui-rs0
RecordSet initialized
INFO 3252ms (+1) 5:36:10 AM:
ColumnSet  instance yui-cs0
ColumnSet initialized
INFO 3251ms (+283) 5:36:10 AM:
DataSource  instance0
DataSource initialized
INFO 2968ms (+2967) 5:36:10 AM:
LogReader  instance0
LogReader initialized
INFO 1ms (+0) 5:36:07 AM:
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 DataTable Control Resources:

Copyright © 2010 Yahoo! Inc. All rights reserved.

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