I can't load json object I created - json

Question

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.

Answer 1

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/