Configuring DataTables for nested objects in JSON Array

rwkiii

I'm using Ajax GET to call an MVC Controller Action that returns Json. The Json result is returned like this:

[{
"User":
    {
        "Name":"John Doe",
        "Company":"EXAMPLE.COM",
        "CountryCode":"USA",
        "StateCode":"IA",
        "Language":"en-US",
        "CreatedDate":"\/Date(1404523831720)\/",
        "LastLoginDate":"\/Date(1404523831720)\/",
    },

"RoleNames":
    ["Employee","Coordinator"]
},

    ...etc, etc...

]

When I load my page I see that DataTables has the correct number of table rows (15), but none of them have any data. Of course, the following error is a tell-all:

DataTables warning: table id=jsonajaxtable - Requested unknown parameter '0' for row 0. For more information about this error, please see http://datatables.net/tn/4

But I am not sure how (in DataTables' expectations) how to configure the jQuery for the nested objects in my result array (User and RoleNames).

Here is my HTML:

    <table id="jsonajaxtable">
        <thead></thead>
        <tbody></tbody>
        <tfoot></tfoot>
    </table>

and here is my jQuery so far:

    $(document).ready(function () {

        userList = [];

        $.ajax({
            url: "/Admin/UsersList/",
            data: { data: 5 },                   // parameter not needed currently...
            success: function (data) {
                alert("success");
                userList = data;
            },
            error: function (data) { 
                alert("error");
                alert(data); 
            },
            type: 'GET'
        });

        $('#jsonajaxtable').dataTable({
            "aaData": userList.User,
            "aoColumns": [
                { "bSortable": true, "sTitle": "Company", "Company": "Company" },
                { "bSortable": true, "sTitle": "Name", "Name": "Name" }
            ]
        });


        // Add event listener for opening and closing details
        $('#jsonajaxtable tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');
            }
        });
    });

My eventual configuration of DataTables will be to use some of the data in the returned Json to populate Child Rows. I've only been experimenting with DataTables today, so don't be too critical of my coding. I know it's not right. ;-)

Can anyone provide me with an example (given my Json structure) of how to configure the DataTables jQuery to see the data inside of the User object?

Also, what would I need to add to see just one piece of data in a Child Row?

allan

You need to use columns.data to tell DataTables where to get the data from, since the object is not ordered in anyway. See also the data source manual page for information about using objects as the data source.

Allan