Search code examples
javascriptjsondatatableyuiyui3

How to create a YUI3 DataTable with complex JSON?


I'm fairly new to YUI and facing an issue while trying to create a YUI3 DataTable from the below JSON -

{

    "generations": [

    {
        "type": "Modern",
        "showName": "The Modern Generation",
        "imgURI": "file:/D:/projectGen.png",
        "relations": {
            "father": {
                "age": "49",
                "firstName": "George",
                "lastName": "Mathews",
                "priority": "1",
                "profession": "Service"
            },
            "mother": {
                "age": "47",
                "firstName": "Susan",
                "lastName": "Aldrin",
                "priority": "2",
                "profession": "Home-Maker"
            },
            "brother": {
                "age": "28",
                "firstName": "Martin",
                "lastName": "Mathews J",
                "priority": "3",
                "profession": "Engineer"
            },
            "sister": {
                "age": "23",
                "firstName": "Laura",
                "lastName": "Mathews J",
                "priority": "4",
                "profession": "Fashion Model"
            }
        }
    }
]

}

The table which I need to create should look like the one below -

enter image description here

Any info on how can I do this? A JSFiddle would be appreciated.


Solution

  • I hope this helps. http://jsfiddle.net/BM3kX/2/

    HTML:

    <div class="yui3-skin-sam" id="datatable"></div>​
    

    Javascript:

    YUI().use('datatable', 'datasource-local', 'datasource-jsonschema',function(Y){
        var data  = {};//JSON here
        var localDataSource = new Y.DataSource.Local({source:data});
        localDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
            schema: {
                resultListLocator: 'generations',
                resultFields: [{key:'showName'},
                               {
                                   key:'father',
                                   locator:'relations.father.firstName'
                               },
                               {
                                   key:'mother',
                                   locator:'relations.mother.firstName'
                               },
                               {
                                   key:'brother',
                                   locator:'relations.brother.firstName'},
                               {
                                   key:'sister',
                                   locator:'relations.sister.firstName'
                               }]
            }
        });
        var table = new Y.DataTable({
            columns: ["showName", "father","mother","brother","sister"]
        });
    
        table.plug(Y.Plugin.DataTableDataSource, {
            datasource: localDataSource
        });
    
        table.render('#datatable');
        table.datasource.load();
    
    });​