jquery - 通过jquery显示Json数组

Question

我是 JSON 数组操作的新手。我有一个返回 json_encode() 结果的 php 文件。

它返回这个结果:

{
    "result": {
        "2015-08-24": {
            "qty": 13,
            "qty_items": 85,
            "subtotal": "Dh11170.09",
            "discount_total": "Dh80.00",
            "adjustment_amt": "Dh-8.00",
            "payments_amt": "Dh3673.75",
            "balance": "Dh7837.84",
            "average": "Dh282.60",
            "details": [
                {
                    "time": "12:47",
                    "sales_id": "100001",
                    "status": "Closed",
                    "client_id": "3275",
                    "client_name": "Nathan Dudley",
                    "subtotal": "Dh300.00",
                    "discount_total": "Dh0.00",
                    "adjust_amt": "Dh0.00",
                    "payments_amt": "Dh300.00",
                    "balance": "Dh0.00",
                    "employee_id": "1914",
                    "employee_name": "Sofia Ferrai"
                },
                {
                    "time": "12:50",
                    "sales_id": "100002",
                    "status": "Open",
                    "client_id": "3599",
                    "client_name": "Scott Cunningham",
                    "subtotal": "Dh400.00",
                    "discount_total": "Dh80.00",
                    "adjust_amt": "Dh32.00",
                    "payments_amt": "Dh0.00",
                    "balance": "Dh288.00",
                    "employee_id": "1914",
                    "employee_name": "Sofia Ferrai"
                },
                {
                    "time": "13:08",
                    "sales_id": "100003",
                    "status": "Open",
                    "client_id": "1",
                    "client_name": "No Client",
                    "subtotal": "Dh2080.00",
                    "discount_total": "Dh0.00",
                    "adjust_amt": "Dh-646.40",
                    "payments_amt": "Dh0.00",
                    "balance": "Dh2726.40",
                    "employee_id": "2060",
                    "employee_name": "Irene Pi"
                }
            ]
        }
    }
}

现在我需要遍历它并通过 jquery 将其显示在表格中。请帮忙。谢谢

Answer 1

您的 JSON 有点棘手，因为结果中有动态日期。花了很长时间才弄清楚这一点，但最终还是克服了。

所以为了解决你的问题，让我们假设你的 html 中有这个表

<table id="personDataTable" cellpadding="2" cellspacing="2">
    <tr>
        <th>Time</th>
        <th>Sales Id</th>
        <th>Status</th>
        <th>Client Id</th>
        <th>Client Name</th>
        <th>Subtotal</th>
        <th>Discount Total</th>
        <th>Adjust Amount</th>
        <th>Payments Amount</th>
        <th>Balance</th>
        <th>Employee Id</th>
        <th>Employee Name</th>
    </tr>

</table>

我在 jquery 中创建了两个重要的方法。这 2 个将创建表格。

function drawTable(data) {

    var propName;
    for (propName in data.result) {
        var details = data.result[propName].details;
        console.log(data.result[propName].details);
        for (var i = 0; i < details.length; i++) {
            drawRow(details[i]);
        }
    }


    console.log(data.result.children);

}

function drawRow(rowData) {
    var row = $("<tr />")
    $("#personDataTable").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
    row.append($("<td>" + rowData.time + "</td>"));
    row.append($("<td>" + rowData.sales_id + "</td>"));
    row.append($("<td>" + rowData.status + "</td>"));
    row.append($("<td>" + rowData.client_id + "</td>"));
    row.append($("<td>" + rowData.client_name + "</td>"));
    row.append($("<td>" + rowData.subtotal + "</td>"));
    row.append($("<td>" + rowData.discount_total + "</td>"));
    row.append($("<td>" + rowData.adjust_amt + "</td>"));
    row.append($("<td>" + rowData.payments_amt + "</td>"));
    row.append($("<td>" + rowData.balance + "</td>"));
    row.append($("<td>" + rowData.employee_id + "</td>"));
    row.append($("<td>" + rowData.employee_name + "</td>"));

}

现在您需要做的就是在成功事件中调用 drawTable 方法，然后您的表格就准备好了。

看看这个 JSFIDDLE 。希望这会有所帮助。