How to create nested datatable from JSON array object response

Question

I get API response in JSON format with nested arrays in it. I want to parse it in nested datatable. I've tried for this, but it won't work. Can anyone let me know where I made a mistake. In JSON I have passenger data & each passenger having multiple drivers, I want to show it in datatable in nested format, like Passenger is parent & respective drivers of it as child.
Expected Result

Here is my JSON response:

/* Formatting function for row details - modify as you need */
function format(driver_data) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
        '<tr>' +
        '<td>Full name:</td>' +
        '<td>' + driver_data.employeename + '</td>' +
        '</tr>' +
        '<tr>' +
        '<td>Extension number:</td>' +
        '<td>' + driver_data.email + '</td>' +
        '</tr>' +

        '</table>';
}

$(document).ready(function () {
    var table = $('.trip_unmacthed').DataTable({
        type: "GET",
        url: "https://api.myjson.com/bins/13woes",
        dataType: "json",
        "columns": [
            {
                "className": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": ''
            },
            {
                "data": "employeename"
                },
            {
                "data": "email"
                }
        ],
        "order": [[1, 'asc']]
    });

    // Add event listener for opening and closing details
    $('.trip_unmacthed 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');
        }
    });
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>


<table class="table table-striped table-bordered table-hover trip_unmacthed">
                                                    <thead>
                                                        <tr>
                                                            <th>User Type</th>
                                                            <th> Name</th>
                                                            <th>Start Location</th>
                                                            <th>Drop Location</th>
                                                            <th> Date </th>
                                                            <th>Actions</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="myData">


                                                    </tbody>
                                                </table>

shubham · Accepted Answer · 2019-01-29 15:37:25Z

Change the passenger_data to data according to API Docs and your format function.

$(document).ready(function () {
        function format(driver_data) {
            console.log(driver_data); var b = ''; var i;
            for (i = 0; i < driver_data.length; i++) {

                b = b + '<tr>' +
                    '<td></td>' +
                    '<td>' + driver_data[i].employeename + '</td>' + 
                    '<td>' + driver_data[i].email + '</td>' +
                    '<td>' + driver_data[i].distance + '</td>' +

                    '</tr>';
            }
            return b;
        }

            var table = $('#example').DataTable({
                "ajax": "https://api.myjson.com/bins/y53hs",
                "columns": [
                    {
                        "className": 'details-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": ''
                    },
                    {
                        "data": "employeename"
                    },
                    {
                        "data": "email"
                    },
                    {
                        "data": "mobilenumber"

                    }

                ],
                "order": [[1, 'asc']]
            });

            // Add event listener for opening and closing details
            $('#example 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
                    console.log(row.data());
                    row.child(format(row.data().driver_data)).show();
                    tr.addClass('shown');
                }
            });
        });

Comments are not for extended discussion; this conversation has been moved to chat.

Haroon nasir · Accepted Answer · 2019-01-29 08:41:02Z

0

Not sure about what your JSON is . If you have a passenger in your JSON e.g.

    {
  "passenger_data": [
    {
      "employeename": "Passenger A",
      "email": null,
      "driver_data": [
        {
          "employeename": "Driver A1",
          "email": null,
          "distance": 0,

        },
        {
          "employeename": "Driver A2",
          "email": null,
          "distance": 0,

        },

      ],
      "mobilenumber": "+12344576",

    },

  ]
}

then you should do it like

 "columns": [
        {"passenger_data": "employeename"},
        {"passenger_data": "driver_data.employeename"},
        {"passenger_data": "driver_data.email"}
    ],

may be your are not using the . operator

edited Jan 29, 2019 at 8:41

answered Jan 29, 2019 at 7:50

Haroon nasir

6761 gold badge7 silver badges25 bronze badges

8 Comments

Tamara Over a year ago

pls check i've updated my json format, i tried but it wont work

Haroon nasir Over a year ago

@Tamara Dont know what are you trying to achieve but it had allot of syntax errors in it . this is the rough idea of what you want .it has the API response in it as well jsfiddle.net/Lyo0wcpa/4

Haroon nasir Over a year ago

to make it more clear if you are trying to make the child row in your table this can also help you .. datatables.net/examples/api/row_details.html

Tamara Over a year ago

that is what i'm trying to do, but unfortunately not able to do

Tamara Over a year ago

yes but it's not what i'm trying to achieve, but yes i got some idea from it. But still i'm struggling to do this

|

Collectives™ on Stack Overflow

How to create nested datatable from JSON array object response

2 Answers 2

1 Comment

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related