Cannot implement datatables with json nested arrays ajax

Question

I tried displaying data into datatables with ajax source json, before there was no problem but after I found the nested json array I was a little confused to implement it, so how do I apply the json I have into datatables . this is my data

Config datatables

var myTable = $('#myTable').DataTable({
    ajax: base_url+"api/data/list",
    responsive: true,       
    columns: [
            { "data": "", "sClass": "text-center", responsivePriority: 0 },
            { "data": "first_name", "sClass": "text-center", responsivePriority: 1 },
            { "data": "last_name", "sClass": "text-left"},
            { "data": "birth_date", "sClass": "text-left",  responsivePriority: 2 },
            { "data": "birth_place", "sClass": "text-left" },               
    ],              
    language: {
        searchPlaceholder: 'Search...',
        sSearch: '',
        zeroRecords: 'No data',
    }
})

Result ajax json

{
  "data": [
    {
      "1": {
        "first_name": "Jonh",
        "last_name": "Connor",
        "birth_date": "1991-11-05",
        "birth_place": "USA"
      },
      "2": {
        "first_name": "Uka",
        "last_name": "Uka",
        "birth_date": "2013-01-06",
        "birth_place": "Austria"
      }
    }
  ]
}

which I expect the result as the following table

| NO  | first_name | last_name | birth_date | birth_place |
|  1  |    Jonh    |   Connor  | 1991-11-05 |    USA      | 
|  2  |    Uka     |    Uka    | 2013-01-06 |  Austria    |

@Milney I can't implement json data into datatables with nested arrays — irwan dwiyanto
– irwan dwiyanto, Commented Aug 13, 2018 at 14:09

Sashae Owens · Accepted Answer · 2018-08-13 17:39:36Z

IDK if this helps but...

myTable.data[0].1.first_name

maybe?

it an object containing your object of arrays containing more objects. Its like JSON inception.

Update:

Pretty sure the ID thing you got going on there is messing it up. It thinks is a column name. so column 1 turn into column 2. Just put the ID in the data.

try this,

HTML

<!DOCTYPE html>
<html>
<head>
  <!-- Data Tables -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
  </head>
<body>

<p id="demo"></p>
<br/>
<table id=example>
<thead>
            <tr>
                <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Birth Date</th>
                <th>Birth Place</th>
            </tr>
        </thead>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

        <!-- Data Tables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script scr="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></script>

</body>
</html>

Script

let data = {
  "data": [
    {
            "record_id": "1",
        "first_name": "Jonh",
        "last_name": "Connor",
        "birth_date": "1991-11-05",
        "birth_place": "USA"
      },
        {
            "record_id": "2",
        "first_name": "Uka",
        "last_name": "Uka",
        "birth_date": "2013-01-06",
        "birth_place": "Austria"
      }
  ]
};

$(document).ready(function() {
    $('#example').DataTable( {
        data: data.data,
        columns: [
        { "data": "record_id", "sClass": "text-center", responsivePriority: 0 },
            { "data": "first_name", "sClass": "text-center", responsivePriority: 1 },
            { "data": "last_name", "sClass": "text-left"},
            { "data": "birth_date", "sClass": "text-left",  responsivePriority: 2 },
            { "data": "birth_place", "sClass": "text-left" },
        ]
    } );
} );

JSfiddle: https://jsfiddle.net/scuba_steve/n86z2r4u/26/

thanks, what if the data is a lot means having to use a loop

Collectives™ on Stack Overflow

Cannot implement datatables with json nested arrays ajax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related