首页 > 解决方案 > DataTables 和 JSON 对象数组

问题描述

我正在尝试将来自 API 调用的 JSON 响应放入 DataTables 数据表中。我正在努力寻找一种方法让数据进入数据表。

在数据部分(获取数据对象)。我尝试过传递 data.fault_codes 和 data.fault_codes[0]。每次它以未定义或错误的形式返回。

这是我的数据表:

$('#faultCodes').DataTable({
    data: data,  // Get the data object
    columns: [
        { 'data': 'fault_code.code_label' },
        { 'data': 'fault_code.code_description' },
        { 'data': 'fault_code.source_address_label' },
        { 'data': 'fault_code.status' },
        { 'data': 'fault_code.first_observed_at' },
        { 'data': 'fault_code.last_observed_at' },
        { 'data': 'fault_code.type' },
        { 'data': 'fault_code.fmi' },
    ],
    order: [[4, "asc"]]
});

这是 JSON 字符串:

{ "fault_codes": [ { "fault_code": { "id": 173164, "code_label": "SID-85", "code_description": "Engine Oil Burn Valve", "source_address_label": "Engine #1", "status": "open", "first_observed_at": "2017-04-17T07:08:51Z", "last_observed_at": "2017-04-19T23:41:17Z", "type": "intermittent", "fmi": 3, "eld_device": { "id": 4144, "identifier": "99999999", "model": "lbb-1" }, "vehicle": { "id": 4565, "number": "301", "year": "2016", "make": "Demo", "model": "Vehicle", "vin": "WP0AB2966NS458669", "metric_units": false } } }, { "fault_code": { "id": 173165, "code_label": "SPN-6926", "code_description": "SCR System Cleaning Inhibited Due to Low Exhaust Temperature", "source_address_label": "Hitch Control", "status": "open", "first_observed_at": "2017-04-17T07:08:51Z", "last_observed_at": "2017-04-19T23:41:17Z", "type": "constant", "fmi": 3, "eld_device": { "id": 4144, "identifier": "99999999", "model": "lbb-1" }, "vehicle": { "id": 4565, "number": "301", "year": "2016", "make": "Demo", "model": "Vehicle", "vin": "WP0AB2966NS458669", "metric_units": false } } } ], "per_page": 25, "page_no": 1, "total": 2 }

在此处输入图像描述

   $.ajax({
        "url": "/api....,
        "type": "GET",
        "datatype": 'json',
        "success": function (data) {
            console.log(data.fault_codes);
            $('#faultCodes').DataTable({
                data: data.fault_codes,  // Get the data object
                columns: [
                    { 'data': 'fault_code.code_label' },
                    { 'data': 'fault_code.code_description' },
                    { 'data': 'fault_code.source_address_label' },
                    { 'data': 'fault_code.status' },
                    { 'data': 'fault_code.first_observed_at' },
                    { 'data': 'fault_code.last_observed_at' },
                    { 'data': 'fault_code.type' },
                    { 'data': 'fault_code.fmi' },
                ],
                order: [[4, "asc"]]
            });
        }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="faultCodes" class="table table-bordered table-hover" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Code Label</th>
      <th>Code Description</th>
      <th>Source</th>
      <th>Status</th>
      <th>First Observed</th>
      <th>Last Observed</th>
      <th>Type</th>
      <th>FMI</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

标签: javascriptjsondatatables

解决方案


推荐阅读