I am having trouble looping through a JSON object and displaying certain values in a table. On that table, there is a view button for each row. When the user clicks the view button, a modal will appear. I can display the data but on the payment details table, it always displays only one data. I search a lot about this problem but I can't see any related to my problem.
My JSON Data:
{
"sales": [
{
"sales_id": "3",
"sales_date": "2021-01-12 01:26:33",
"sales_po": "100549",
"sales_so": "1234",
"sales_dr": "5768",
"sales_si": "1794",
"sales_particulars": "Authorized Personnel Only",
"sales_media": "Sticker on Sintra",
"sales_net_amount": "8601.60",
"sales_balance": "4601.60"
}
],
"payments": [
{
"payment_id": "3",
"payment_amount": "1000.00",
"payment_date": "2021-01-15",
"payment_remarks": ""
},
{
"payment_id": "4",
"payment_amount": "1000.00",
"payment_date": "2021-01-18",
"payment_remarks": ""
},
{
"payment_id": "5",
"payment_amount": "2000.00",
"payment_date": "2021-01-29",
"payment_remarks": ""
}
]
}
jQuery/ajax:
function view_payment_detail(sales_id) {
var modal = $('#payment-details-modal');
$.ajax({
type: 'POST',
url: url + 'GetPaymentInfoById',
data: { payment_info_id : sales_id },
dataType: 'json',
success: function (data) {
console.log(data);
modal.modal('show');
modal.find($('#sales_date')).html(data.sales[0].sales_date);
modal.find($('#sales_po')).html(data.sales[0].sales_po);
modal.find($('#sales_so')).html(data.sales[0].sales_so);
modal.find($('#sales_dr')).html(data.sales[0].sales_dr);
modal.find($('#sales_si')).html(data.sales[0].sales_si);
modal.find($('#sales_particulars')).html(data.sales[0].sales_particulars);
modal.find($('#sales_media')).html(data.sales[0].sales_media);
$.each(data.payments, function(i, payment) {
modal.find($('#payment_date')).html(data.payments[i].payment_date);
modal.find($('#payment_amount')).html(data.payments[i].payment_amount);
modal.find($('#payment_remarks')).html(data.payments[i].payment_remarks);
});
}
});
}
Table:
<div id="payment-details-modal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-green-600">
<h5 class="modal-title" id="modal-title"><i class="icon-cash3 mr-2"></i> PAYMENT DETAILS</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<input type="hidden" id="payment_info_id" name="payment_info_id" class="form-control">
<h6 class="font-weight-semibold">Sales Details</h6>
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th colspan="3">Date</th>
<td id="sales_date"></td>
</tr>
<tr>
<th>PO Number</th>
<td id="sales_po"></td>
<th>SO Number</th>
<td id="sales_so"></td>
</tr>
<tr>
<th>DR Number</th>
<td id="sales_dr"></td>
<th>SI Number</th>
<td id="sales_si"></td>
</tr>
</table>
<hr>
<table class="table table-bordered">
<tr>
<th>Particulars</th>
<td id="sales_particulars"></td>
<th>Media</th>
<td id="sales_media"></td>
</tr>
</table>
</div>
<hr>
<h6 class="font-weight-semibold">Payment Details</h6>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Amount Paid</th>
<th>Remarks</th>
</tr>
<tr>
<td id="payment_date"></td>
<td id="payment_amount"></td>
<td id="payment_remarks"></td>
</tr>
</thead>
</table>
</div>
<hr>
<table>
<tr>
<th>Total Fees: </th>
<td id="sales_net_amount"></td>
</tr>
<tr>
<th>Total Paid: </th>
<td id="total_paid"></td>
</tr>
<tr>
<th>Balance: </th>
<td id="total_balance"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-green-600" data-dismiss="modal">Close</button>
</div>
</div>
</div>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…