How to Loop in JSON Data

Question

I Have a JSON data file like below and I would like to load all objects under the utility into a table but I am not even able to load first row into the table!

Can you please take a look at this and let me know what I am doing wrong? and how I can loop trough all utility objects and load them in a seperate table <tr>

var data = {
  "utility": {
    "Water": {
      "account": "99999",
      "balance": "5555",
      "owner": "Fred"
    },

    "Phone": {
      "account": "7777",
      "balance": "6666",
      "owner": "Mark"
    },

    "Power": {
      "account": "A9885",
      "balance": "2222",
      "owner": "Suzan"
    }
  },

  "clients": {
    "David": {
      "account": "99999",
      "balance": "5555",
      "Date": "Jan 11"
    },

    "George": {
      "account": "7777",
      "balance": "6666",
      "Date": "March 22"
    },

    "Marco": {
      "account": "A9885",
      "balance": "2222",
      "Date": "Feb 25"
    }
  }

}

var obj = JSON.parse(data);
$(".container").append(
  '<table class="table table-hover"><tr><td>' + 
  obj.Water.account + 
  '</td><td>99999</td><td>5555</td><td>Fred</td></tr></table>'
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

`data` is an object, not a JSON string. Don't try to use `JSON.parse` on it. — Mike Cluck, Feb 17 '16 at 21:16
Thanks Mike I removed the `JSON.parse` but I am getting error message for `Uncaught TypeError: Cannot read property 'account' of undefined` — Behseini, Feb 17 '16 at 21:18
Possible duplicate http://stackoverflow.com/questions/1051061/convert-json-array-to-an-html-table-in-jquery — Vinny M, Feb 17 '16 at 21:18
That's because `data` doesn't have a property of `Water`. You should be using `data.utility`. — Mike Cluck, Feb 17 '16 at 21:18
And to iterate the properties of the `utility` object either use a `for...in` loop or you could use `Object.keys` — Matt Burland, Feb 17 '16 at 21:20
Possible duplicate of [Loop through JavaScript object](http://stackoverflow.com/questions/684672/loop-through-javascript-object) — Dave, Feb 17 '16 at 21:21
@Behseini check out the answer that I have done. Its very simple and elegant — pritesh, Feb 17 '16 at 21:37

Scott Marcus · Accepted Answer · 2016-02-17T21:37:06.763

1

Once you have parsed the JSON, it's just a standard object. Loop through it as such:

 // Loop through the utility property:
 for(var p in data.utility){

    // Loop through the properties of the utility property:
    for(var p2 in data.utility[p]){
        var row = document.createElement("tr");

        // Loop through the properties of the found property
        for(var p3 in data.utility[p][p2]){
            var cell - document.createElement("td");
            cell.innerHTML = p3 + " = " + data.utility[p][p2][p3];
        }
        row.appendChild(cell);
    }
    // Use appendChild to append row to table.
 }

edited Feb 17 '16 at 21:37

answered Feb 17 '16 at 21:22

Scott Marcus

64,069
6
49
71

Thanks but Mike C commented to not parse the data! – Behseini Feb 17 '16 at 21:23
@Behseini: That's because it's already an object. The answer still applies. – SLaks Feb 17 '16 at 21:24
1

You misunderstand me. I simply mean that once your have your object (by any means) just loop it as normal. – Scott Marcus Feb 17 '16 at 21:24
Well I understant it when we want to console.log it but how can I append them to a table? plus this is just printing out the `utility and clients! – Behseini Feb 17 '16 at 21:26

score 1 · Answer 2 · answered Feb 17 '16 at 21:36

Hopefully this is how you want. Tell me if you want improved.

var data =
  {
    "utility": {
                 "Water": {
                  "account": "99999",
                  "balance": "5555",
                  "owner": "Fred" 
                },
                
                 "Phone": {
                  "account": "7777",
                  "balance": "6666",
                  "owner": "Mark" 
                },  
                  
                 "Power": {
                  "account": "A9885",
                  "balance": "2222",
                  "owner": "Suzan" 
                } 
    },
      
    "clients": {
                 "David": {
                  "account": "99999",
                  "balance": "5555",
                  "Date": "Jan 11" 
                },
                
                 "George": {
                  "account": "7777",
                  "balance": "6666",
                  "Date": "March 22" 
                },  
                  
                 "Marco": {
                  "account": "A9885",
                  "balance": "2222",
                  "Date": "Feb 25" 
                } 
    }
    
}

var utils = data.utility;
var tableStr='';
$.each(utils,function(key,value){
    tableStr +="<tr>";
    tableStr +="<td>"+key+"</td>";
    $.each(value,function(k,v){
      tableStr +="<td>"+k+"</td><td>"+v+"</td>";
    });
  tableStr +="</tr>";
});
$("#tbl").html(tableStr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <table  class="table table-hover" id="tbl">
    </table>
</div>

score 0 · Answer 3 · answered Feb 17 '16 at 21:44

As you add the jQuery tag, I provide you this approach:

  //if you have a JSON (string)
  //var obj = JSON.parse(data);

  var prop1, prop2, inner,
      $table = $('<table>').addClass('table table-hover'),
      $tr, $td;

  //loop over 'utility' properties
  for (prop1 in data.utility) {
    $tr = $('<tr>');
    inner = data.utility[prop1];
    for (prop2 in inner) {
      $td = $('<td>').text(inner[prop2]).appendTo($tr);
    }
    $tr.appendTo($table);
  }

  $table.appendTo(".container");

score 0 · Answer 4 · answered Feb 17 '16 at 21:53

as mentioned above, you dont need to parse your data. so this snippet should do it for you:

//just use you data array you have above.
jQuery(document).ready(function(){
    var result = "<table>";
    for (var item in data.utility) {
        result += "<tr><td>" + item + ":</td>";
        console.log(item);
        for (var subItem in data.utility[item]) {
            result += "<td>" + data.utility[item][subItem] + "</td>";
        }
        result += "</tr>";
    }
    result+="</table>";
    jQuery(".container").append(result);
});

let me know if it works for you.

StuS · Answer 5 · 2018-02-04T09:38:40.873

Please, read an article from MDN, because it describes a difference between methods:

in
for..in
Object.keys
Object.getOwnPropertyNames
Object.getOwnPropertyDescriptors

Also have a look at the method:

Object.keys()

The Object.keys() method returns an array of a given object's own enumerable properties, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).

Examples from MDN:

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

// array like object with random key ordering
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(an_obj)); // console: ['2', '7', '100']

// getFoo is property which isn't enumerable
var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
my_obj.foo = 1;

console.log(Object.keys(my_obj)); // console: ['foo']

Object.getOwnPropertyNames()

The Object.getOwnPropertyNames() method returns an array of all properties (enumerable or not) found directly upon a given object.

Examples from MDN:

var arr = ['a', 'b', 'c'];
console.log(Object.getOwnPropertyNames(arr).sort()); 
// logs ["0", "1", "2", "length"]

// Array-like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.getOwnPropertyNames(obj).sort()); 
// logs ["0", "1", "2"]

// Logging property names and values using Array.forEach
Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) {
  console.log(val + ' -> ' + obj[val]);
});
// logs
// 0 -> a
// 1 -> b
// 2 -> c

// non-enumerable property
var my_obj = Object.create({}, {
  getFoo: {
    value: function() { return this.foo; },
    enumerable: false
  }
});
my_obj.foo = 1;

console.log(Object.getOwnPropertyNames(my_obj).sort()); 
// logs ["foo", "getFoo"]

How to Loop in JSON Data

5 Answers5