json數組顯示通過jquery

Question

我是新的JSON數組操作。我有一個PHP文件，返回一個json_encode（）結果。

它返回這樣的結果：

{ 
    "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是有點棘手，因爲你有動態dates內的結果。經歷了一段艱難的時期，但終於能夠通過它了。

所以解決你的問題讓我們假設你有這樣的表在你的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已經取得了兩個重要的方法。這兩個將創建表。

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。希望這可以幫助。