Question

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 –

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

Answer 1

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();

});​