JSON data not displyed in DataTable

Board index » YUI 3.x: » Using YUI 3.x Components

Page 1 of 1

[ 6 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

Manilal

Username: libregeek
Joined: Mon Sep 26, 2011 1:50 am
Posts: 3
GitHub: manilal
Gists: manilal
IRC: libregeek

Tags:

JSON data not displyed in DataTable

Posted: Mon Sep 26, 2011 2:23 am

+0-

I'm trying to implement a minimal DataTable implementation from a Spring application. Here is the code I tried:
http://pastie.org/2593355

I could see only the table headers in the web page, even though firebug shows the entire json data. The structure of the json data provided by spring is as follows:
http://pastie.org/2593364

Additionally, I would also like to access the nested objects in the json data. Any help would be appreciated.

regards
Manilal

Alberto Santini

YUI Contributor

Username: icebox
Joined: Wed Sep 16, 2009 3:16 am
Posts: 1066
Location: Milan, Italy
Twitter: santinialberto
GitHub: albertosantini
Gists: albertosantini
IRC: icebox

Tags:

Re: JSON data not displyed in DataTable

Posted: Mon Sep 26, 2011 2:03 pm

+1-

Hello Maninal.

The data is JSON.

It would be better using a Y.Plugin.DataSourceJSONSchema plugin.

For instance,
http://yuilibrary.com/yui/docs/datasour ... local.html

For the nested fields, you can use the dot syntax.

For instance, (in your case you don't need resultListLocator):

Code:

ptfDS.plug(Y.Plugin.DataSourceJSONSchema, {
                schema: {
                    resultListLocator: "rows",
                    resultFields: ["key", "id",
                            {key: "value.created_at"},
                            {key: "value.assets"},
                            {key: "value.weights"},
                            {key: "value.ref"},
                            {key: "value.ret"},
                            {key: "value.risk"},
                            {key: "value.perf"},
                            {key: "value.constraints.lowBounds"},
                            {key: "value.constraints.highBounds"}
                        ]
                }
            });

Hope that helps,
IceBox

Manilal

Username: libregeek
Joined: Mon Sep 26, 2011 1:50 am
Posts: 3
GitHub: manilal
Gists: manilal
IRC: libregeek

Tags:

Re: JSON object not populated in DataTable

Posted: Mon Sep 26, 2011 8:25 pm

+0-

Hello Alberto,
Thanks for your quick reply. I tried your suggestion, but still the data in not populated in DataTable. Here is the modified code.

Code:

YUI().use("datasource-io","datasource-get","datatable-base","datatable-datasource","datasource-arrayschema","datasource-jsonschema",function (Y) {

var url = "/FetchingLife/Employee/AjaxList?";
var ds, table;

ds = new Y.DataSource.Get({ source: url });

ds.plug(Y.Plugin.DataSourceJSONSchema, {
        schema: {
                resultFields: [{key: "firstName"},{key: "lastName"}]
                }
        });

var cols = [
            {key:"firstName", label:"First name"}, 
            {key:"lastName", label:"Last Name"}
           ];

table = new Y.DataTable.Base({
                columnset: cols,
});

table.plug(Y.Plugin.DataTableDataSource, { datasource: ds });

table.render("#empTable");

table.datasource.load();
});

I can see the JSON response in firebug debug console, but it doesn't show up in the table. I think I'm missing something very trivial.

Todd Smith

YUI Contributor

Username: stlsmiths
Joined: Thu Nov 05, 2009 10:03 am
Posts: 675
GitHub: stlsmiths
Gists: stlsmiths
IRC: t_smith

Tags:

Re: JSON data not displyed in DataTable

Posted: Tue Sep 27, 2011 7:26 am

+1-

Recommend you look at a similar posting http://yuilibrary.com/forum/viewtopic.php?f=90&t=8596, specifically an example I had posted at http://blunderalong.com/yui/dtb/dt_json_io.html. This example uses a remote JSON request via POST to get the data. The JSON is not nested, but the basics are the same.

I suggest you review these examples and reduce your example to use your remote data non-nested in DataTable and get that working. Once that works, progressively add in the nested data as Icebox recommends.

Todd

Last edited by stlsmiths on Thu Mar 01, 2012 2:06 pm, edited 1 time in total.

Alberto Santini

YUI Contributor

Username: icebox
Joined: Wed Sep 16, 2009 3:16 am
Posts: 1066
Location: Milan, Italy
Twitter: santinialberto
GitHub: albertosantini
Gists: albertosantini
IRC: icebox

Re: JSON data not displyed in DataTable

Posted: Tue Sep 27, 2011 8:18 am

+1-

Hello Manilal.

A working example: http://jsfiddle.net/RCCqu/

The example create the columns definition and the datasource schema automagically scraping the JSON object.

Feel free to modify data to test the results.

With Todd's example there should be enough coverage.

Hope that helps,
IceBox

Manilal

Username: libregeek
Joined: Mon Sep 26, 2011 1:50 am
Posts: 3
GitHub: manilal
Gists: manilal
IRC: libregeek

Tags:

Re: JSON data not displyed in DataTable

Posted: Tue Sep 27, 2011 10:15 pm

+0-

Finally, I got it working. A million thanks to Todd & Alberto for the timely help and guidance. Here is the code which worked for me:

Code:

YUI().use( "datasource-io", "datasource-jsonschema", "datatable-base", "datatable-datasource", 
           function (Y) {
    var cols = [    
            { key: "name", label: 'Name'  }, 
            { key: "email",  label: "Email"  },
            { key: "user.username", label: 'Username'  },
            { key: "user.password", label: 'Password'  },
        ];
    var url = "/Employee/AjaxList";
    var ds = new Y.DataSource.IO( { 
        source: url
     });
     ds.plug(Y.Plugin.DataSourceJSONSchema, {
            schema: {
                resultFields: [ 'name', 'email', 'user.username', 'user.password' ],
            }
        });
    var dt = new Y.DataTable.Base({
        columnset:cols } )
        .plug(Y.Plugin.DataTableDataSource, {datasource:ds});
    dt.render("#dtable");
    dt.datasource.load();
});

Hope this will help somebody struggling with DataTable and DataSource.

Page 1 of 1

[ 6 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum