Json array display through jquery

Question

I am new with JSON arrays manipulation. I have a php file that returns a json_encode() result.

It is returning this result:

{
    "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"
                }
            ]
        }
    }
}

Now I need to go through it and display it in a table via jquery. Please help. Thanks

Answer 1

your JSON is a little tricky since you have dynamic dates inside the results. had a tough time figuring that out but was able to finally get through it.

so to solve your problem lets assume you have this table in your 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>

there are two important methods that I've made in jquery. these 2 will create the table.

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>"));

}

now all you need is to call the drawTable method inside your success event and you will have your table ready.

Have a look at this JSFIDDLE. hope this helps.