Debug School

rakesh kumar
rakesh kumar

Posted on

How to get nested data from json object in datatable

refer here
refer here
refer here

Problem

I am working on jQuery datatable in mvc, I get data through ajax call and bind to datatable as predefined syntax. The json object for ajax call response contains nested data as shown in picture.

Image description

I did fetch root data successfully, but when i try to get nested data its fail to show the data.

oTable =$(".dataTables-example").DataTable({
    stateSave: true,
    "pagingType": "full_numbers",
    "ajax": {
        "url": "my_action_method_url",
        "type": "POST",
        "datatype": "json"
    },
    pageLength: 10,
    responsive: true,
    "columns": [
        {
            "mData": null,
            mRender: function (data) {
                return data['instituteName']; // working fine.
            }
        },
        {
            "mData": null,
            mRender: function (data) {
                return data['personalInfo.title']; // not working.
            }
        }
    ],
    "serverSide": "true",
    "order": [0, "asc"],
    "processing": "true",
    "language": {
        "processing": "Loading data..."
    }
});
Enter fullscreen mode Exit fullscreen mode

Solution 

data.instituteName
Enter fullscreen mode Exit fullscreen mode

============================OR===================

data.personalInfo.title
Enter fullscreen mode Exit fullscreen mode

Problem2:

This json works:

{
  "data": [
       {"id": "myid1", "name": "name1"},
       {"id": "myid2", "name": "name2"}
       ]
}
But my json looks like this, and it does not work

{
 "result": {
    "data": [
        {"id": "myid1", "name": "name1"},
        {"id": "myid2", "name": "name2"}
        ]
    }
 }
Enter fullscreen mode Exit fullscreen mode

That's my html (which works with the first json):

<table id="myTable" class="tabletable-bordered dataTable">
    <thead>
        <tr>                 
           <th>name</th>
           <th>id</th>
        </tr>
    </thead>
    <tbody>
        <td></td>
        <td></td>
    </tbody>
</table>
Enter fullscreen mode Exit fullscreen mode

MY SOLUTION

Finally (before getting an answer to my post) I went with the following solution, I first make an ajax call and then on success I create my DataTable.

so I only changed my js to this one:

$.ajax({
    type: "GET",
    url: '/names',
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        var myData = data.result.data;
        $('#myTable').DataTable({
            "data": myData,
            "columns": [
                    { "data": "id" },
                    { "data": "name"},
             ]
          });
     }
});
Enter fullscreen mode Exit fullscreen mode

DataTables example Nested object data (objects)

DataTables has the ability to use data from almost data JSON data source through the use of the columns.dataDT option. In its simplest case, it can be used to read arbitrary object properties, but can also be extended to n levels of nested objects / arrays through the use of standard Javascript dotted object notation. Each dot (.) in the columns.dataDT option represents another object level.

In this example hr.position refers to the position property of the hr object in the row's data source object, while contact.0 refers to the first element of the contact array. Any number of dots can be used to obtain deeply nested data.

The example below shows DataTables reading information for the columns from nested objects and arrays, where the structure of the row's data source in this example is:

{
    "name": "Tiger Nixon",
    "hr": {
        "position": "System Architect",
        "salary": "$3,120",
        "start_date": "2011/04/25"
    },
    "contact": [
        "Edinburgh",
        "5421"
    ]
}
Enter fullscreen mode Exit fullscreen mode

Image description

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { $('#example').dataTable( 
{ "processing": true, 
"ajax": "data/objects_deep.txt",
 "columns": [
{ "data": "name" },
 { "data": "hr.position" },
 { "data": "contact.0" }, 
{ "data": "contact.1" },
 { "data": "hr.start_date" }, 
{ "data": "hr.salary" } ] 
} ); 
} );
Enter fullscreen mode Exit fullscreen mode

Top comments (0)