Forums

Hi,

I am trying to load Json data using DataTableDataSource plugin and facing challenges on populating the data. Using the reference api available in the YUI library examples I am able to populate, but for the one in the code it wasn't working, getting unexpted token syntax error on console. Am I missing anything,please advice.

Here is my code.
var colums = ["id", "name", "propertyURL", "rootPropertyName"];
dtsource = new Y.DataSource.Get({
source:"http://sp1-ycrmuidev-001.ads.pool.corp.sp1.yahoo.com:4025/Services/v1/cartItemService?format=json"})
.plug(Y.Plugin.DataSourceJSONSchema, {
schema: {
resultListLocator: "cartItem.items",
resultFields: ["id", "name", "propertyURL", "rootPropertyName"]
}
}),
dtable = new Y.DataTable.Base({columnset:colums,
summary:"Shopping cart items",
caption:"Table with JSON data from api"})
.plug(Y.Plugin.DataTableDataSource, {datasource:dtsource}).render("#jsonapi-datatable");
dtable.datasource.load({request:"&id=14"});

Json response:
{
"@lang": "en-US",
"cartItem":
{
"@lang": "en-US",
"cartId": "14",
"items":
[
{
"@lang": "en-US",
"id": "5",
"name": "global/network/main",
"propertyURL": "mail.yahoo.com",
"rootPropertyName": "All Other",
"spaceId": "2023407535"
},
{
"@lang": "en-US",
"id": "5",
"name": "global/network/main",
"propertyURL": "mail.yahoo.com",
"rootPropertyName": "All Other",
"spaceId": "2023407535"
}
]
},
"status":
{
"@lang": "en-US",
"message": "",
"status": "success"
}
}

Link to page: http://seedrushsystem.greatamerica.corp ... ble.action

Thanks for your help.

Bhaswathi

Hi bhaswath,

I was able to get your posting working, after a little bit of work. The example is on jsFiddle at http://jsfiddle.net/blunderalong/pPY7K/. I had to simulate your remote datasource using a LocalDataSource with your JSON snippet included, but it runs the same.

One thing I noted, your data includes duplicated records, specifically related to the "id" field item. If possible in your case, I would recommend;
a) re-naming "id" to something "other than 'id'" from the DataSource (it may be conflicting with an internal name within DataTable).
b) If you can't change the DataSource, you can define a "locator" entry on DataSchema to rename it (as I did in the jsfiddle link above).

This may have uncovered a bug in DataTable, I have filed a ticket at ticket/2532501 related to this.

You don't mention which version of YUI 3 you are using, but I'll note in your code snippet that if you are using a version 3.5.0 or greater, you should utilize "Y.DataTable" (instead of Y.DataTable.Base) and the DataTable config should be "columns" (instead of "columnset"), which is deprecated.

Todd