var data = [
    {
        "id": 1,
        "name": "Stas Gavrylov",
        "email": "stasgavrylov@gmail.com",
        "phone": "18294525813",
        "street": "Palma Cana",
        "city": "Bavaro",
        "state": "DR",
        "zip": "23000"
    },
    {
        "id": 2,
        "name": "John Doe",
        "email": "johndoe@gmail.com",
        "phone": "380957654321",
        "street": "Central str.",
        "city": "Kiev",
        "state": "UA",
        "zip": "99000"
    },
    {
        "id": 3,
        "name": "Jane Doe",
        "email": "janedoe@gmail.com",
        "phone": "380951234567",
        "street": "Another str.",
        "city": "Kiev",
        "state": "UA",
        "zip": "99000"
    },
    {
        "id": 4,
        "name": "Bill Murray",
        "email": "billmurray@yahoo.com",
        "phone": "18003332211",
        "street": "Hollywood",
        "city": "Los Angeles",
        "state": "US",
        "zip": "90028"
    }
];
(function(myApp, $, undefined) {

    if (!(myApp.ctrl))
        myApp.ctrl = {};
    var Ctrl = myApp.ctrl;

    // Get all user records.
    Ctrl.getRecords = function() {
        var records = myApp.model.UserRecord.loadRecords();
        myApp.view.listUsers(records);
    };

})(window.myApp = window.myApp || {}, jQuery);
(function(myApp, $, undefined) {

    if (!(myApp.model))
        myApp.model = {};
    var Model = myApp.model;

    // Create new user record.
    Model.UserRecord = function(userdata) {
        var keys = Object.keys(userdata);
        var key;
        for (var i = 0; i < keys.length; i++) {
            key = keys[i];
            this[key] = userdata[key];
        }
    };

    Model.UserRecord.convertRecordToObj = function(userRecord) {
        var record = new Model.UserRecord(userRecord);
        return record;
    };

    // Property to store user record objects.
    Model.UserRecord.instances = [];

    // Load all records.
    Model.UserRecord.loadRecords = function() {

        console.log(data.length + ' records loaded.');
        for (var i = 0; i < data.length; i++) {
            var user = Model.UserRecord.convertRecordToObj(data[i]);
            Model.UserRecord.instances.push(user);
        }

        return Model.UserRecord.instances;
    };

})(window.myApp = window.myApp || {}, jQuery);
(function(myApp, $, undefined) {

    if (!(myApp.view))
        myApp.view = {};
    var View = myApp.view;

    // Render list of provided user records.
    View.listUsers = function(records) {
        var tableBody = document.querySelector('#userlist tbody');
        var bodyHTML = '';

        // InnerHTML here for brevity.
        for (var rec of records) {
            bodyHTML += '<tr data-recordId="' + rec.id + '">';
            bodyHTML += '<td>' + rec.name + '</td>';
            bodyHTML += '<td>' + rec.email + '</td>';
            bodyHTML += '<td>' + rec.phone + '</td>';
            bodyHTML += '<td>' + rec.street + '</td>';
            bodyHTML += '<td>' + rec.city + '</td>';
            bodyHTML += '<td>' + rec.state + '</td>';
            bodyHTML += '<td>' + rec.zip + '</td>';
            bodyHTML += '</tr>';
        }
        tableBody.innerHTML = bodyHTML;
    };


})(window.myApp = window.myApp || {}, jQuery);