Having Issue on Looping In JSON File

Having Issue on Looping In JSON File

Can you please take a look at This Demo  and let me know why I am not able to load all objects in the JSON file under `utility` into the table

  2. var data = {
  3.   "utility": {
  4.     "Water": {
  5.       "account": "99999",
  6.       "balance": "5555",
  7.       "owner": "Fred"
  8.     },

  10.     "Phone": {
  11.       "account": "7777",
  12.       "balance": "6666",
  13.       "owner": "Mark"
  14.     },

  16.     "Power": {
  17.       "account": "A9885",
  18.       "balance": "2222",
  19.       "owner": "Suzan"
  20.     }
  21.   },

  23.   "clients": {
  24.     "David": {
  25.       "account": "99999",
  26.       "balance": "5555",
  27.       "Date": "Jan 11"
  28.     },

  30.     "George": {
  31.       "account": "7777",
  32.       "balance": "6666",
  33.       "Date": "March 22"
  34.     },

  36.     "Marco": {
  37.       "account": "A9885",
  38.       "balance": "2222",
  39.       "Date": "Feb 25"
  40.     }
  41.   }

  43. }


  46. for (var p in data.utility) {
  47.   console.log(p);
  48.   $("#tbl-data").append('<tr><td>' + p + '</td><td>' + p.utility.water.account + '</td><td>' + p.utility.water.balance + '</td><td>' + p.utility.water.owner + '</td></tr>');
  49. }

  53. <div class="container">
  54.   <table id="tbl-data" class="table table-hover"></table>
  55. <div>
As you can see I am getting this error in the console

Uncaught TypeError: Cannot read property 'water' of undefined

but cant' figure it out why?