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

Question

我得到 JSON 格式的 API 响应，其中包含嵌套数组。我想在嵌套数据表中解析它。我已经为此尝试过，但它不起作用。谁能让我知道我在哪里犯了错误。在 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>

标签： javascriptjqueryjsonajaxdatatable

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": "[phone]",

    },

  ]
}

那么你应该这样做

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

可能是您没有使用.运营商