CODEWITHSUNDEEP
javascriptajax
lechnerio
lechnerio

Reputation: 982

populating table after successful ajax call with array in javascript

I'm trying to fill a table with the result of a successful ajax call. I work on multiple endpoints here.

Backend (PHP):

the backend returns an Array.

Array ( 
    [0] => Array ( 
       [eid] => 5060529 
       [uid] => 494 
       [created] => 2020-11-10T14:23:33.903 
       [persnr] => 001354 
       [contractnr] => V-00019 
       [agentnr] => OL-010 
       [location] => 1 
       [client] => 1015 
       [validfrom] => 2020-12-01T00:00:00 
       [validto] => 2020-12-31T00:00:00 
       [isborrowed] => 1 
       [calweek] => 
       [year] => 
    )
   [n] => Array(...)
)

Frontend Call:

when printing the result to the console I see the correct values itself.

$("#contractDetailBtn").on('click', function(){
  let datefrom = $('input#datefrom').val();
  let dateto = $('input#dateto').val();
  let client = $('input#client').val();

  let link = `/backend/lnk?datefrom=${datefrom}&dateto=${dateto}&client=${client}`;
  console.log(link);

  $.ajax({
    type: 'GET',
    datatype: 'html',
    url: link,

    success: function(result){
      var table = $("#ajaxpopulate tbody");

      console.log(result);
      
    }
  });
});

My try was to loop through the result values and populate the table using:

$.each(result, function(i, e){
  table.append("<tr><td>"+e.eid+"</td><td>"+e.uid+"</td><td>"+e.created+"</td></tr>");
});

Which should work using json. Since I'm getting an array back I'm aparently struggeling with getting the format in a way I'd need it to. When using json_encode() in the backend I'm getting an escaped what looks to be json back. I was wondering, how I can get the result in a way I can continue to work with.

Any help would be very appreciated.

Upvotes: 0

Views: 654

Answers (2)

Paulos Ab
Paulos Ab

Reputation: 399

From the PHP backend I'll suggest using json_encode

Like so:

`
$result =  array( 
[0] => Array ( 
   [eid] => 5060529 
   [uid] => 494 
   [created] => 2020-11-10T14:23:33.903 
   [persnr] => 001354 
   [contractnr] => V-00019 
   [agentnr] => OL-010 
   [location] => 1 
   [client] => 1015 
   [validfrom] => 2020-12-01T00:00:00 
   [validto] => 2020-12-31T00:00:00 
   [isborrowed] => 1 
   [calweek] => 
   [year] => 
    )
   [n] => Array(...)
    );

   echo  json_encode("data" => $result);

 `

Then you get it from the JavaScript frontend like so:

   success: function(result){
     var data = JSON.parse(result);
     // OR
     var data = JSON.parse(result.data);
     var table = $("#ajaxpopulate tbody");
      // then
      console.log(data.data);
     }

Upvotes: 0

KonohaNinja
KonohaNinja

Reputation: 89

I did it this way. Hope this is helpful.

$.ajax({
    url: '/your_api',
    type: 'get',
    success: function (response) {         
      var table_data = '';
      $('#your_table_id').empty();

      for(var i = 0; i<response.length;i++) {
       table_data += '<tr>';
       table_data += '<td>' + i + '</td>';
       table_data += '<td class="text-wrap">' + response[i].firstName + " " + response[i].lastName + '</a></td>'
       table_data += '</tr>'; 
      }

      $('#your_table_id').append(table_data);
    }
  });

And my html was this:

<table class="table table-bordered">
  <thead>
    <tr>
      <th> heading 1 </th>
      <th> heading 2 </th>
    </tr>
  </thead>
  <tbody id="your_table_id"></tbody>
</table>

Upvotes: 1

Related Questions