JSON Loop

by Akram kamal

HTML

<div class="container">
    <table id="tbl-data" class="table table-hover"></table>
    <div>

JavaScript

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

}

$.each(data.utility, function(bill, info) {
    console.log(bill, info)
    $("#tbl-data").append('<tr><td>' + bill + '</td><td>' + info.account + '</td><td>' + info.balance + '</td><td>' + info.owner + '</td></tr>');

})