Display data in table on ajax success [duplicate] - php

Question

This question already has answers here:
jQuery parse JSON multidimensional array
(2 answers)
Closed 3 years ago.
I am submitting the form from ajax, and after ajax success i want to display all data in table tr td.
Below is my response which i got on ajax success and i want to load inside table on ajax success, but its displaying blank table.
{"raildata":null,"killdata":[{"id":146,"acct_id":1885,"AcctNo":"UP2357"},{"id":145,"acct_id":1885,"AcctNo":"UP2357"}]}
Below is my jquery ajax code which i tried, but its not displaying data after form submit on success.
$(document).ready(function(){
$('#killfrm').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '<?= Router::url(['controller' => 'Killsheets', 'action' => 'addKillsheet']) ?>',
data: $('form').serialize(),
beforeSend: function(){
$('#ibox1').children('.ibox-content').toggleClass('sk-loading');
},
success: function(response) {
var trHTML = '';
$(response).each(function (i,value) {
trHTML += response.killdata.map(function(killdata) {
return '<tr class="gradeA"><td>' + killdata.id + '</td><td>' + killdata.AcctNo + '</td></tr>';
});
trRailHTML += response.raildata.map(function(raildata) {
return '<tr class="gradeA"><td>' + raildata.rail_no + '</td><td>' + raildata.scale_no + '</td><td><button title="View" class="btn btn-default btn btn-xs tblbtn">View</button></td></tr>';
});
});
$('#txtcount').val(sum);
$('#listRail').html(trRailHTML);
$('#listKill').html(trHTML);
},
error: function(response) {
console.log(response);
}
});
});
});
Below is my HTML table
<table class="table table-bordered">
<thead>
<tr>
<th>Sheet#</th>
<th>Acc #</th>
<th>Action</th>
</tr>
</thead>
<tbody id="listKill"> </tbody>
</table>

Answer 1

you can pass $.each:
script:
$(document).ready(function(){
$('#killfrm').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: '<?= Router::url(['controller' => 'Killsheets', 'action' => 'addKillsheet']) ?>',
data: $('form').serialize(),
beforeSend: function(){
$('#ibox1').children('.ibox-content').toggleClass('sk-loading');
},
success: function(response) {
let trHTML = '';
let killData = response.killdata;
let raildata = response.raildata;
$.each(killData, function(kill) {
let killid = kill.id;
let killacct_id = kill.acct_id;
let killAcctNo = kill.AcctNo;
trHTML += '<tr>';
trHTML += '<td>'+killid+'</td>';
trHTML += '<td>'+killacct_id+'</td>';
trHTML += '<td>'+killAcctNo+'</td>';
trHTML += '</tr>';
});
$('#listRail').html(raildata);
$('#listKill').html(trHTML);
},
error: function(response) {
console.log(response);
}
});
});
});
you get result html trHTML in id of #listKill:
html:
<table class="table table-bordered">
<thead>
<tr>
<th>Sheet#</th>
<th>Acc #</th>
<th>Action</th>
</tr>
</thead>
<tbody id="listKill">result goes here </tbody>
</table>
you can get any response data from response.objectkey = get value

Answer 2

for get json data in ajax response you need to pass ajax options :
dataType:"json"
go with below example:
$.ajax({
type: 'post',
url: 'Your Url',
data: $('form').serialize(),
dataType:'json',
success: function(response) {
response == here you get object you can get any value by object key
}
});
your json response:
{"raildata":null,"killdata":[{"id":146,"acct_id":1885,"AcctNo":"UP2357"},{"id":145,"acct_id":1885,"AcctNo":"UP2357"}]}
you can get result by using response variable like below
console.log(response.killdata);
console.log(response.raildata);
try above if you get any help

Answer 3

Table body is appended like this:
Assin id to your table
<table class="table table-bordered" id='my_table'>
Add this row to add the new rows
$("#my_table tbody").append(trHTML);