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.

Name	Phone	City	Rating
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 \| ?

{"ResultSet":{
    "totalResultsAvailable":665,
    "totalResultsReturned":10,
    "firstResultPosition":1,
    "ResultSetMapUrl":"http:\/\/local.yahoo.com\/mapview?stx=pizza&csz=Sunnyvale%2C+CA+94089&city=Sunnyvale&state=CA&radius=15&ed=9brhZa131DwigChqKlCo22kM1H_9WgoouCr87Ao-",
    "Result":[{
        "Title":"Pizza Depot",
        "Address":"919 E Duane Ave",
        "City":"Sunnyvale",
        "State":"CA",
        "Phone":"(408) 245-7760",
        "Latitude":"37.388537",
        "Longitude":"-122.003972",
        "Rating":{
            "AverageRating":"3.5",
            "TotalRatings":"5",
            "TotalReviews":"5",
            "LastReviewDate":"1161495667"},
        "Distance":"0.93",
        "Url":"http:\/\/local.yahoo.com\/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--",
        "ClickUrl":"http:\/\/local.yahoo.com\/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--",
        "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",
        "BusinessUrl":"http:\/\/pizza-depot.com\/",
        "BusinessClickUrl":"http:\/\/pizza-depot.com\/"},

...
    ]}
}

CSS:


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

Markup:


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

JavaScript:


1	YAHOO.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 \| ?

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.XHR_JSON = new function() {
        this.formatUrl = function(elCell, oRecord, oColumn, sData) {
            elCell.innerHTML = "<a href='" + oRecord.getData("ClickUrl") + "' target='_blank'>" + sData + "</a>";
        };

var myColumnDefs = [
            {key:"Title", label:"Name", sortable:true, formatter:this.formatUrl},
            {key:"Phone"},
            {key:"City"},
            {key:"Rating.AverageRating", label:"Rating", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true}
        ];

this.myDataSource = new YAHOO.util.DataSource("assets/php/ylocal_proxy.php?");
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        this.myDataSource.connXhrMode = "queueRequests";
        this.myDataSource.responseSchema = {
            resultsList: "ResultSet.Result",
            fields: ["Title","Phone","City",{key:"Rating.AverageRating",parser:"number"},"ClickUrl"]
        };

this.myDataTable = new YAHOO.widget.DataTable("json", myColumnDefs,
                this.myDataSource, {initialRequest:"query=pizza&zip=94089&results=10&output=json"});

var myCallback = function() {
            this.set("sortedBy", null);
            this.onDataReturnAppendRows.apply(this,arguments);
        };
        var callback1 = {
            success : myCallback,
            failure : myCallback,
            scope : this.myDataTable
        };
        this.myDataSource.sendRequest("query=mexican&zip=94089&results=10&output=json",
                callback1);

var callback2 = {
            success : myCallback,
            failure : myCallback,
            scope : this.myDataTable
        };
        this.myDataSource.sendRequest("query=chinese&zip=94089&results=10&output=json",
                callback2);
    };
});

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 Library Examples: DataTable Control: JSON Data Over XHR

Sample Code for this Example

Configuration for This Example

YUI Logger Output:

DataTable Control Examples:

More DataTable Control Resources: