Display JSON Data using Alloy UI

Question

I'm simply tring to parse json data and have it display in a datatable using Alloy UI's framework

YUI().use(
    'aui-datatable', 'json-parse', 
    function(Y) {
        var columns = [
            { key: 'ID', sortable: true },
            { key: 'Name', sortable: true }
        ];
        var jsonstring = '{"info":['+
                     '{"ID":"100", "Name":"Roy"},'+
                     '{"ID":"200", "Name":"Moss"},'+
                     '{"ID":"300", "Name":"Jen"}'+
        ']}';
        try {
           data = Y.JSON.parse(jsonstring);
        }
        catch (e) {
            alert("Invalid data");
        }
        new Y.DataTable(
            {
                columns: columns,
                data: data
            }
        ).render("#mySearchResultsContainer");
    }

1) How would I map ID and Name to the columns in my datatable?

2) How might this be accomplished using data from an external json file?

Answer 1

Here you go: http://jsfiddle.net/9wd8jqtL/

The main problem was that the data you pass into DataTable needs to be an array: you were passing the object. Passing in data.info provides it with the array you want:

 new Y.DataTable(
        {
            columns: columns,
            data: data.info
        }
    ).render("#mySearchResultsContainer");

Also, you need to include the Alloy UI data table script one way or another, I think. I certainly did on the jsfiddle to get it working (also I think there may be issues with newer versions of YUI on jsfiddle too), but that shouldn't be an issue elsewhere.

On getting external data, it depends where it's coming from. But most likely you'll need Y.io or similar to load the data, and have your table building function in the callback for when the data returns.