Search code examples
yuiyui-datatableyui-datasource

yui datatable column dot notation displays nothing


YUI DataTable doesn't display values for 'dot.notation' keys (though there seems to be a weird trick that works). What's the best way to remedy this? I want a 'correct' answer, not the current one I have where I flatten nested objects AND retain the nested objects (both must be present for this to currently work).

example data (3rd datum works because of weird duplication trick)

var table = new Y.DataTable({
    columns: ['key', 'dot.notation'],
    data: [{
        // broken
        key: 'value',
        'dot.notation': 5
    }, {
        // broken
        key: 'value',
        dot: {
            notation: 5
        }
    }, {
        // displays
        key: 'value',
        'dot.notation': 5,
        dot: {
            notation: 5
        }
    }]
});

http://jsfiddle.net/dirkraft/ERk2d/


Solution

  • Using DataSchema is the correct way to handle this. I believe that the dotted key version used to work but then changes in version 3.5 stopped this working

    YUI().use('datatable', 'datasource','datasource-jsonschema', function (Y) {
    
        var ds = new Y.DataSource.Local({
            source: [{
                // broken
                key: 'value',
                'dot.notation': 5
            }, {
                // broken
                key: 'value',
                dot: {
                    notation: 5
                }
            }, {
                // displays
                key: 'value',
                'dot.notation': 5,
                dot: {
                    notation: 5
                }
            }]
        });
    
        ds.plug({fn: Y.Plugin.DataSourceJSONSchema, cfg: {
        schema: {
            resultFields: [
                "key",
                {
                    key:'foo',
                    locator:'dot.notation'
                }
            ]
        }
    }});
    
        var table = new Y.DataTable({
            columns: ['key', 'foo'],
            caption: 'Better Now'
        });
        table.plug(Y.Plugin.DataTableDataSource, {
            datasource: ds
        });
        table.render('#lolol');
        table.datasource.load();
    
    });
    

    http://jsfiddle.net/ERk2d/3/