How to show data of inner Array of JSON data using AJAX?

Question

I have some sort of

[  
   {  
      "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"
         }
      ]
   }
]

How can i show this selectionAudi.audGrpId data in dataTable when called from AJAX? Here the Api is called through 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"
            } ]
        });

But when I add "data":"selectionAudi.audGrpId" then the datatable shows error like :

The code for table is:

<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>

How can i show the inner Json data into datatable?I am not able to see what is the real solution.

selectionAudit is an array with one object that has the audGrpId property, so you need selectionAudi[0].audGrpId to access the property. — cнŝdk
– cнŝdk, Commented Nov 23, 2018 at 10:52
because it's an array, I would recommend you to use the custom render callback, using the data or row argument and checking whether selectionAudit exists in your object. Check this for reference: datatables.net/reference/option/columns.render — briosheje
– briosheje, Commented Nov 23, 2018 at 10:57

cнŝdk · Accepted Answer · 2018-11-23 13:16:11Z

2

Your problem is that selectionAudit is an array with one object that contains the audGrpId property, so writing just selectionAudi.audGrpId is what's throwing this Error, because it's trying to access the audGrpId property in the array.

What you need is to write selectionAudit[0].audGrpId to access the right property.

This is how should be your code:

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

Note:

This assumes selectionAudit is an array and it's always filled with this object.

edited Nov 23, 2018 at 13:16

answered Nov 23, 2018 at 10:57

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

briosheje Over a year ago

Just a side note: this will fail if selectionAudit is an empty array. Not sure this will ever happen, but still...

cнŝdk Over a year ago

@briosheje Yes, you are right, but I assumed it's always like this.

Muhammad Tarique · Accepted Answer · 2018-11-23 11:27:14Z

You can follow the way I usually do it not server side processing of datatable.

Suppose you HTML page from where you are making API calls -

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

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

Call the API request through AJAX GET method and add below javascript code in bottom of your HTML page -

<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>

Now in your php page where you actually calls the API and decode the json response -

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

?>

Collectives™ on Stack Overflow

How to show data of inner Array of JSON data using AJAX?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related