Why is DataTable only displaying the first row of the Array

Question

I am using DataTable from datatables.net. I use Ajax and PHP to dynamically populate the DataTable. The challenge is that only the first row from the Ajax response/array is displayed in the DataTable. I have spent two days browsing the internet without finding the solution to my challenge.

As you can see below I am getting an Ajax response which I loop through to create an array called 'displayresult'. The array is populated using array.push. The values of the array is used to populate the DataTable. As mentioned only the first row of the array is being displayed in the DataTable.

The array looks like this:

[{"1":"201909074","2":"Jim is a cool guy","4":"2019-06-05"},

{"1":"201906753","2":"Jane is a cool girl","4":"2019-04-30"},

{"1":"201906648","2":"Fofo is a cool dog","4":"2019-04-26"}]

  $.ajax({
  url: '../../core/search/get_general_search.php', 
  data:{sok:sok}, 
  dataType: 'json', 
    success: function(response)
  {
     console.log(JSON.stringify(response));
   var searchResult = response;
   var displayresult = [];


    for (var i in searchResult)
    {
      var row = searchResult[i];

      var reference = row[1];
      var heading = row[2];
      var documentDate = row[4];


     displayresult.push(reference, heading, documentDate);
    }   

    $('#result_table').DataTable({
      "responsive": true,
      "searching": false, 
      "aaData": [displayresult]
        });     
  }
}); //end ajax

Answer 1

You need to push a object to the array, not values

 displayresult.push({reference, heading, documentDate});
 $('#result_table').DataTable({
  "responsive": true,
  "searching": false, 
  "aaData": displayresult
    });     
 }