如何从JSON数组对象响应创建嵌套数据表

Question

我得到JSON格式的API响应，其中包含嵌套数组。我想在嵌套的数据表中解析它。我已经尝试过了，但是没有用。谁能让我知道我在哪里犯了错误。在JSON中，我有乘客数据，每个乘客都有多个驱动程序，我想以嵌套格式在数据表中显示它，就像“乘客”是父级，而其各自的驱动程序则是“子级”。
Expected Result

这是我的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

不确定您的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"}
    ],

可能是您未使用.运算符

Answer 2

根据API文档和您的格式化功能将passenger_data更改为数据。

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