Question

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.

Answer 1

Where did you get that result block from, the console? That isn’t valid JSON, but it looks like a valid javascript object. You really shouldn’t apply bindings in a call like that. It should happen once, usually on domReady. Updates the viewModel will update bindings automatically after that; that’s the whole point.

Anyway, I threw this into a fiddle and it works fine. Something else is going on that’s breaking your code.