I'm attempting to data bind JSON data return from a Grails controller to a table using Knockout. I believe the JSON being returned is good:
result
[
Object
class: "project.Person"
firstName: "Bill"
id: 2
lastName: "Fake"
__proto__: Object
,
Object
class: "project.Person"
firstName: "Dale"
id: 3
lastName: "Fake"
__proto__: Object
,
Object
class: "project.Person"
firstName: "Linda"
id: 4
lastName: "Fake"
__proto__: Object
]
Here's my javascript:
var Directory = {
list: ko.observableArray([])
};
var Person = function(id, first, last) {
this.id = ko.observable(id);
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
};
var loadPeople = function() {
$.ajax({
url: "${createLink(action: "getPeople")}",
type: "post",
contentType: "application/json",
success: function(result) {
for(p in result) {
Directory.list.push(new Person(p.id,p.firstName,p.lastName));
}
ko.applyBindings(Directory);
}
});
};
loadPeople();
And finally, my markup:
<table>
<thead>
<tr><th>Id</th><th>First name</th><th>Last name</th></tr>
</thead>
<tbody data-bind="foreach: list">
<tr>
<td data-bind="text: id"></td>
<td data-bind="text: firstName"></td>
<td data-bind="text: lastName"></td>
</tr>
</tbody>
</table>
I've looked at the similar questions and tried list.Person
, Person
, passing the observable array to the bindings instead of the Directory
. When I debug, Directory.list()
contains an array of size 3
of type Person
so it looks to be correct.
The error:
Uncaught Error: Unable to parse binding attribute. Message: ReferenceError: id is not defined; Attribute value: text: id
Any help is appreciated.