如何使用AJAX显示JSON数据内部数组的数据?

时间:2018-11-23 10:40:59

标签: javascript json ajax datatable

我有某种

configure(AuthenticationManagerBuilder auth)

从AJAX调用时,如何在dataTable中显示此[ { "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" } ] } ] 数据? 这里的Api是通过AJAX调用的。

selectionAudi.audGrpId

但是当我添加“ data”:“ selectionAudi.audGrpId”时,数据表显示如下错误: enter image description here

该表的代码为:

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"
            } ]
        });

如何将内部Json数据显示到数据表中?我看不出什么是真正的解决方案。

2 个答案:

答案 0 :(得分:2)

您的问题是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"
         ]
});

注意:

这假设selectionAuditarray,并且始终充满此object

答案 1 :(得分:0)

您可以遵循我通常不对数据表进行服务器端处理的方式。

假设您在进行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>

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

<?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));

?>