Knockout Mapping not updating self.users - php

Question

Trying to display all users from a MySQL database in Knockout and CodeIgniter. I'm getting a json response back from the server but Knockout isn't displaying the Json data.
I keep getting:
Uncaught ReferenceError: Unable to parse bindings.
Bindings value: text: id
Message: id is not defined
Html:
<!-- Users -->
<table class="table table-condensed table-striped table-bordered table-hover">
<thead>
<tr><th>User Id</th><th>Name</th><th>Email</th><th>Role</th></tr>
</thead>
<tbody data-bind="foreach: users">
<tr>
<td data-bind="text: id"></td>
<td><input data-bind="value: name" /></td>
<td><input data-bind="value: email"/></td>
<td><select data-bind="options: $root.roles, value: role, optionsText: 'role', optionsValue: 'role'"></select></td>
<td><a href="#" data-bind="click: $root.removeUser" class='icon-remove'></a></td>
</tr>
</tr>
</tbody>
</table>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
Knockout:
<script type="text/javascript">
function User(data) {
this.name = ko.observable(data.name);
this.email = ko.observable(data.email);
this.id = ko.observable(data.id);
this.role = ko.observaveble(data.role);
}
function UserListViewModel(data) {
// Data
var self = this;
self.users = ko.observableArray([]);
// Operations
self.addTask = function() {
self.tasks.push(new Task({title: this.newTaskText()}));
self.newTaskText("");
};
self.removeTask = function(task) {
self.tasks.remove(task)
};
// Load initial state from server, convert it to Task instances, then populate self.tasks
$.get("/sws/users/index", function(data) {
var mappedUsers = ko.mapping.fromJSON(allData);
self.users(mappedUsers);
});
}
ko.applyBindings(new UserListViewModel());
</script>
Json:
{"users":[{"id":"1","email":"example#gmail.com","password":"tacos","permissions":null,"activated":"1","activation_code":null,"activated_at":"2013-09-23 20:19:42","last_login":"2013-09-23 20:19:42","persist_code":null,"reset_password_code":null,"name":"Chris","created_at":"2013-09-23 04:17:24","updated_at":"2013-09-23 07:16:23"}]}

Answer 1

You're passing allData as an argument to the mapping, but it isn't defined anywhere. You want data.users instead (not data because then ko.mapping.fromJSON will return a single object with one key, users whose value will be an observableArray; you'll confuse Knockout if you try to use that object as the value of another observableArray, namely self.users).

Answer 2

Switching to this .ajax call seemed to resolve the issue.
// Load initial state from server, convert it to User instances, then populate self.users
$.ajax({
url: '/sws/users/index',
dataType: 'json',
type: 'POST',
success: function (data) {
self.users(data['users']);
console.log(data['users']);
}
});