javascript - Loop json data and display in table inside modal

Question

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> &nbsp;PAYMENT DETAILS</h5>
            <button type="button" class="close" data-dismiss="modal">&times;</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>

Answer 1

You cannot have duplicated IDs. They must be unique.

Hence, I changed the code of your modal body from:

<tr>
    <td id="payment_date"></td>
    <td id="payment_amount"></td>
    <td id="payment_remarks"></td>
</tr>

to:

<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>

I removed all the IDs because you can address each cell by index. At the same time I added an id to the table.

In the $.each loop you can .clone() the first tbody row, use the cloned element and append at the end of tbody.

$.each(data.payments, function (i, payment) {
     var x = $('#tbbody tbody tr:first').clone().appendTo('#tbbody tbody');
     x.find('td').eq(0).text(data.payments[i].payment_date);
     x.find('td').eq(1).text(data.payments[i].payment_amount);
     x.find('td').eq(2).text(data.payments[i].payment_remarks);
});

The snippet:

var 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": ""
        }
    ]
};
var modal = $('#payment-details-modal');
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) {
    var x = $('#tbbody tbody tr:first').clone().appendTo('#tbbody tbody');
    x.find('td').eq(0).text(data.payments[i].payment_date);
    x.find('td').eq(1).text(data.payments[i].payment_amount);
    x.find('td').eq(2).text(data.payments[i].payment_remarks);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>


<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> &nbsp;PAYMENT DETAILS</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</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" id="tbbody">
                        <thead>
                        <tr>
                            <th>Date</th>
                            <th>Amount Paid</th>
                            <th>Remarks</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        </tbody>
                    </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>
</div>

<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>