Как создать вложенный объект данных из ответа объекта массива JSON

Question

Я получаю ответ API в формате JSON с вложенными массивами в нем.Я хочу разобрать его во вложенных данных.Я пытался это сделать, но это не сработает.Может кто-нибудь, дайте мне знать, где я допустил ошибку.В JSON у меня есть данные о пассажирах, и у каждого пассажира есть несколько водителей, я хочу показать их в виде данных во вложенном формате, например, «Пассажир является родителем» и соответствующие драйверы этого ребенка.
Ожидаемый результат

Вот мой ответ JSON:

/* 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>

Answer 1

Измените passenger_data на данные в соответствии с API Docs и вашей функцией форматирования.

$(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');
                }
            });
        });

Answer 2

Не уверен насчет вашего JSON.Если в вашем JSON есть пассажир, например

    {
  "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",

    },

  ]
}

, то вам следует сделать это так:

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

, возможно, вы не используете оператор .