如何使用 AJAX 显示 JSON 数据的内部数组的数据？答案

【问题标题】：How to show data of inner Array of JSON data using AJAX?如何使用 AJAX 显示 JSON 数据的内部数组的数据？
【发布时间】：2018-11-23 10:40:59
【问题描述】：

我有一些

[  
   {  
      "selectionId":1,
      "selectionDate":"101662",
      "selectedBy":"ABC",
      "eximPanNo":222,
      "eximPanName":"DEF",
      "eximPanNameEng":"KKK",
      "eximPanAddress":null,
      "eximPanAddressEng":null,
      "eximPanPhone":12334566,
      "selectionType":"G",
      "consignmentNo":0,
      "consignmentDate":"2098",
      "productName":"LLL",
      "selectionFromDate":"2019",
      "selectionToDate":"2090",
      "agentNo":123,
      "selectionStatus":"I",
      "entryBy":"PCS",
      "entryDate":"2018-11-22 11:46:02",
      "rStatus":"F",
      "custOfficeId":1,
      "selectionAudit":[  
         {  
            "audGrpId":1,
            "selectionId":1,
            "assignFromDate":"2075-08-03",
            "assignToDate":"2075-08-19",
            "entryBy":"1",
            "rStatus":"1"
         }
      ]
   }
]

从 AJAX 调用时，如何在 dataTable 中显示此 selectionAudi.audGrpId 数据？这里的Api是通过AJAX调用的。

var table = $('#nepal').DataTable({
            "processing" : true,
            "ajax" : {
                "url" : A_PAGE_CONTEXT_PATH + "/form/api/getAllSelectionAudit/all",
                dataSrc : ''
            },
            "columns" : [ {
                "data" : "selectionId"
            }, {
                "data" : "selectionDate"
            }, {
                "data" : "selectedBy"
            }, {
                "data" : "eximPanNo"
            } ]
        });

但是当我添加 "data":"selectionAudi.audGrpId" 时，数据表会显示如下错误：

表格代码为：

<table id="nepal" class="table table-bodered">

          <thead>
            <tr>
              <th>Selection No</th>
              <th>SelectionDate</th>
              <th>SelectedBy</th>
              <th>PanEximNumber</th>
              <th>AudiGroupID</th>  


            </tr>
          </thead>
          <tbody>

          </tbody>

        </table>

如何将内部 Json 数据显示到数据表中？我无法看到真正的解决方案。

【问题讨论】：

selectionAudit 是一个array，其中一个object 具有audGrpId 属性，因此您需要selectionAudi[0].audGrpId 才能访问该属性。
因为它是一个数组，我建议您使用自定义的render 回调，使用data 或row 参数并检查您的对象中是否存在selectionAudit。检查此以供参考：datatables.net/reference/option/columns.render

标签： javascript json ajax datatable

【解决方案1】：

您的问题是selectionAudit 是一个array，其中一个object 包含audGrpId 属性，所以只写selectionAudi.audGrpId 是引发此错误的原因，因为它正在尝试访问audGrpId 属性在数组中。

你需要写selectionAudit[0].audGrpId来访问正确的属性。

这应该是你的代码：

var table = $('#nepal').DataTable({
        "processing" : true,
        "ajax" : {
            "url" : A_PAGE_CONTEXT_PATH + "/form/api/getAllSelectionAudit/all",
            dataSrc : ''
        },
        "columns" : [ {
            "data" : "selectionId"
        }, {
            "data" : "selectionDate"
        }, {
            "data" : "selectedBy"
        }, {
            "data" : "eximPanNo"
        }, {
            "data" : "selectionAudit[0].audGrpId"
         ]
});

注意：

这假定 selectionAudit 是一个 array 并且它总是用这个 object 填充。

【讨论】：

附注：如果selectionAudit 是一个空数组，这将失败。不确定这是否会发生，但仍然......
@briosheje 是的，你是对的，但我认为它总是这样。

【解决方案2】：

你可以按照我通常做的方式而不是数据表的服务器端处理。

假设您从其中进行 API 调用的 HTML 页面 -

<!-- Button to make API request -->
<button id="btnAPIRequest">API Request</button>

<!-- API response div -->
<div id="responseAPI"></div>

通过 AJAX GET 方法调用 API 请求，并在 HTML 页面底部添加下面的 javascript 代码 -

<script>
    $("#btnAPIRequest").click(function(){
        $.ajax({
            type: "GET",
            url: "Your/url/to/page.php",
            data: 'if you have any data else blank',
            dataType: 'json',
            success: function(data){
                if(data.success){
                    $("#responseAPI").html(data.message);

                    // Initialize datatable here
                }
                else{
                    $("#responseAPI").html(data.message);
                }
            }
        });
    });
</script>

现在在您实际调用 API 并解码 json 响应的 php 页面中 -

<?php  
// Load the reuiqred library

// Make API request

// Get the resonse in json
$response = '[{"selectionId":1,..."selectionAudit":[{"audGrpId":1,..."rStatus":"1"}]}]';

// Decode the json response
$decoded_data = json_decode($response);

// Get your html table
$msg = '
    <table>
        <thead>
            <tr>
              <th>Selection No</th>
              <th>SelectionDate</th>
              <th>SelectedBy</th>
              <th>PanEximNumber</th>
              <th>AudiGroupID</th>  
            </tr>
          </thead>
          <tbody>
';

// Table body data
foreach($decoded_data as $data){
    $msg .= '
        <tr>
            <td>'.$data[0].'</td>
            <td>'.$data[2].'</td>
            <td>'.$data[3].'</td>
            <td>'.$data[4].'</td>
    ';

    // I think here you got stuck when extracting from multidimensional array
    foreach($data[n] as $audi_data){
        $msg .= '<td>'.$audi_data[i].'</td>';
    }

    $msg .=  '</tr>'; 
}

$msg .= '</tbody></table>';

// For success respone
// encode this value in json and ajax response will handle this as per return datatype option
echo json_encode(array('success'=>true, 'message'=>$msg));

// Similarly  for failed response
echo json_encode(array('success'=>true, 'message'=>$msg));

?>

【讨论】：