在javascript中循环遍历json多维数组

时间:2017-09-13 05:51:41

标签: javascript json multidimensional-array

我需要一些关于json多维数组的帮助

"00100": {
"claim_id": "21",
"reference_no": "00100",
"distributor_name": "Standard Match",
"group_name": "A",
"month": "Jun2017",
"grand_total": "268.532",
"details": [
    {
        "product_name": "Match Type 1",
        "price": "102.00",
        "quantity": "02",
        "net_amount": "179.52"
    },
    {
        "product_name": "Match type 2",
        "price": "101.15",
        "quantity": "01",
        "net_amount": "89.012"
    }
]
}

请解释我如何使用嵌套数组创建一个循环! enter image description here

2 个答案:

答案 0 :(得分:1)

您可以获得如下所有嵌套属性:

$.each(dataArray, function (i) {
    $.each(this, function (key, value) {
    {
        //base properties
        alert(key + " : " + value);
        if (key == "details") {
            $.each(value, function (key1, value1) {
                //child  properties
                for(k in value1) {
                   alert( key1 + ':' + k + ':' + value1[k]);
                }
            })
        }
    }
    });
});

答案 1 :(得分:0)

使用以下代码将数组绑定到datatable



$(document).ready(function() {
  var data =  {"00100":{"claim_id":"21","reference_no":"00100","distributor_name": "Standard Match","group_name": "A","month": "Jun2017","grand_total": "268.532","details":[{ "product_name": "Match Type 1","price": "102.00","quantity": "02","net_amount": "179.52"},{"product_name": "Match type 2","price": "101.15","quantity": "01","net_amount": "89.012"}]}};
  
  var table = $("#tbl");
  table.DataTable ({
      "data" : data['00100']['details'],
      "columns" : [
       { "data": "product_name" },
       { "data": "price" },
       { "data": "quantity" },
       { "data": "net_amount" }
      ]
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="tbl" class="display" width="100%">
  <thead>
    <tr>
        <th>Product Name</th>
        <th>Price</th>
        <th>Quantity</th>
        <th>Amount</th>
    </tr>
   </thead>
</table>
&#13;
&#13;
&#13;