javascript - Display json data inside modal's table

Question

I have a payment table where users can see all the transactions. On that table, there is a view button for each row. When the user clicks the view button, a modal will appear. Now the problem is, why I can't display the JSON data in a table inside the modal? Also, how can I display loop the payments? Thanks!

This is my JSON data.

Table: This is the table where I want to display the data.

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

This what I've tried:

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_date);
            modal.find($('#sales_po')).html(data.sales_po);
            modal.find($('#sales_so')).html(data.sales_so);
            modal.find($('#sales_dr')).html(data.sales_dr);
            modal.find($('#sales_si')).html(data.sales_si);
            modal.find($('#sales_particulars')).html(data.sales_particulars);
            modal.find($('#sales_media')).html(data.sales_media);
        }
    });
}

JSON:

{
    "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"
        }
    ],
    "0": {
        "payments": {
            "payment_id": "3",
            "payment_amount": "1000.00",
            "payment_date": "2021-01-15",
            "payment_remarks": ""
        }
    },
    "1": {
        "payments": {
            "payment_id": "4",
            "payment_amount": "1000.00",
            "payment_date": "2021-01-18",
            "payment_remarks": ""
        }
    },
    "2": {
        "payments": {
            "payment_id": "5",
            "payment_amount": "2000.00",
            "payment_date": "2021-01-29",
            "payment_remarks": ""
        }
    }
}

Answer 1

等待大神答复