Append function() is not working in jQuery Ajax of PHP response - php

Question

I am getting the array through PHP and I want to append in in table but I tried to make it from last 2 days and uses all the function which available on stackoverflow but it not working...
Please developers , help me and teach me how i append out output data in table as below -
PHP Code :-
$result = $stmt->fetchAll();
foreach($result as $data => $value) {
//$QL QUERY HERE
$data = array('name' => $value["name"], 'amount' => $amount, 'invoice' => $Invoice, 'response' => '200');
echo json_encode($data);
}
exit();
My PHP response is :-
{"name":"AMAZON_FBA","amount":"1","invoice":"25","response":"200"}
{"name":"AMAZON_IN","amount":"12","invoice":"22","response":"200"}
{"name":"FLIPKART","amount":"42","invoice":"08","response":"200"}
{"name":"PAYTM","amount":"36","invoice":"03","response":"200"}
{"name":"Replacement","amount":"0","invoice":"17","response":"200"}
Ajax:-
$.ajax({
.
.
success: function (data) {
var my_orders = $("table#salesReturnTB > tbody.segment_sales_return");
$.each(data, function(i, order){
my_orders.append("<tr>");
my_orders.append("<td>" + data[i].order.name + "</td>");
my_orders.append("<td>" + data[i].order.invoice + "</td>");
my_orders.append("<td>" + data[i].order.amount + "</td>");
my_orders.append("<td>" + data[i].order.response + "</td>");
my_orders.append("</tr>");
});
});
});

Answer 1

in the PHP you need to define a $list variable (because you've already used the $data name as an input parameter in your loop), and move the echo outside the loop. Otherwise it echoes each individual data item, rather than creating a coherent JSON array. A list of individual items without the [..] at each end isn't valid JSON, so JavaScript can't read it.
$result = $stmt->fetchAll();
$list = array();
foreach($result as $data => $value)
{
$list = array('name' => $value["name"], 'amount' => $amount, 'invoice' => $Invoice, 'response' => '200');
}
header("Content-Type: application/json");
echo json_encode($list);
exit();
And, in the JavaScript/jQuery, you have a similar problem where you're using the data name to represent two different things - the list of items, and an individual item within the loop.
This should work better:
$.each(data, function(i, item) {
my_orders.append("<tr>");
my_orders.append("<td>" + item.name + "</td>");
my_orders.append("<td>" + item.invoice + "</td>");
my_orders.append("<td>" + item.amount + "</td>");
my_orders.append("<td>" + item.response + "</td>");
my_orders.append("</tr>");
});