CODEWITHSUNDEEP
jsonknockout.js
user1656779
user1656779

Reputation: 241

I can't load json object I created

I am using KnockoutJS for a web page. I created a JSON object to mimic values from server. Each time I run the page I get an empty record. Am I missing something?

var data ={ "employee": [{
"SiteId": 9,
    "SystemId": 1,
    "SystemName": "Glocus",
    "ManualLink": "http://www.Glocus.com/Guide",
    "ContactNo": "301-489-8989",
    "UserAccount": [{
    "AccountId": 1,
        "AccountName": "Sisij",
        "AccountType": "Customer System",
        "Username": "Tybeke"
        "Password": "*****",
}, {
    "AccountId": 2,
         "AccountName": "gabid",
        "AccountType": "System System",
        "Username": "Tybeke"
        "Password": "*****",
}]
}, {
"SiteId": "1",
   "SystemId": 1,
    "SystemName": "TheSecondWorld",
    "ManualLink": "http://www.TheSecondWorld.com/Guideplan",
    "ContactNo": "301-489-8989",
    "UserAccount": [{
    "AccountId": 1,
        "AccountName": "Uniqex",
        "AccountType": "Customer System",
        "Username": "TUniqux"
        "Password": "*****",
}, {
    "AccountId": 2,
         "AccountName": "Celind",
        "AccountType": "System System",
        "Username": "GCElinds"
        "Password": "*****",
}]
}]};


var ViewModel = function () {
var self = this;
var hello = ko.mapping.fromJS(data);
self.items = ko.observableArray(hello);
};

ko.applyBindings(new ViewModel());

Here is my knockoutJS Html code:

<div>
 <span>Account</span>
<hr/>
<table>
    <thead>
        <tr>
            <th>System Name</th>
            <th>Manual link</th>
            <th>Contact No</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: items.employee">
        <tr>
            <td data-bind="text :SystemName"></td>
            <td data-bind="text : ManualLink"></td>
            <td data-bind="text : ContactNo "></td>
        </tr>
    </tbody>
</table>
<hr/>
</div>

I have wasted so much time trying to get it right. Any help will be appreciated.

Upvotes: 2

Views: 56

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191779

ko.mapping is used to create viewmodels. So you wouldn't actually nest view models in this case; you would just use the JSON to create one:

viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);

http://jsfiddle.net/32765/1/

Upvotes: 1

Related Questions