Loop through a json multidimensional array in javascript

Question

i need some help about json multidimensional array

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

Please explain me how to create a loop for this having a nested arrays! enter image description here

What have you tried? Please share the code which you have written. — Hassan Imam
– Hassan Imam, Commented Sep 13, 2017 at 6:03
@HassanImam Sir actually i need this in Jquery Datatables datatables.net/examples/server_side/row_details.html but i can't understand what i do, because im new to Web Development! — user8515874
– user8515874, Commented Sep 13, 2017 at 6:06
@HassanImam Column names are: Distributor Name, Group, Month-Year and Amount — user8515874
– user8515874, Commented Sep 13, 2017 at 7:07
@HassanImam i added a picture in the question, having the required out put — user8515874
– user8515874, Commented Sep 13, 2017 at 7:14

Yogesh · Accepted Answer · 2017-09-13 05:55:27Z

1

You can get all nested properties like below:

$.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]);
                }
            })
        }
    }
    });
});

answered Sep 13, 2017 at 5:55

Yogesh

6855 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user8515874 Over a year ago

if i need this in Datatables? @Yogesh

Yogesh Over a year ago

Datatable in javascript? or do you want to loop through each child properties without checking condition? I didn't get you

user8515874 Over a year ago

datatables.net/examples/server_side/row_details.html i need to deisplay the details in row details. @Yogesh

Hassan Imam · Accepted Answer · 2017-09-13 07:59:53Z

0

Use the below code to bind the array to the 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>

answered Sep 13, 2017 at 7:59

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

2 Comments

user8515874 Over a year ago

ihttps://i.sstatic.net/t7s5B.jpg but i required the following output @Hassan Imam

user8515874 Over a year ago

cscc.edu/_resources/app-data/datatables/examples/api/… take a look i need like this @Hassan Imam

Collectives™ on Stack Overflow

Loop through a json multidimensional array in javascript

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related