Question

I have the following JSON coming back from a web service which I am trying to bind to a simple list just to show the name and image for customers:

{"Customers":{"data":[{"CustomerID":1,"CustomerName":"Jones","CustomerImage":"~/Images/Customers/Jones02.gif","CustomerEnabled":true},{"CustomerID":7,"CustomerName":"Hughes","CustomerImage":"~/Images/Customers/Hughes057847.gif","CustomerEnabled":true},{"CustomerID":13,"CustomerName":"Michaels","CustomerImage":"~/Images/Customers/M12012.gif","CustomerEnabled":true},{"CustomerID":123,"CustomerName":"Bernard","CustomerImage":"~/Images/Customers/kb040412.gif","CustomerEnabled":true}]}}

In my markup I have

<section id="CustomerList">
    <ul data-bind: 'foreach: data'>
        Data: <span data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></span>

        <li>
            <span data-bind="text:CustomerID"></span>
        </li>
    </ul>
</section>

But I cannot get it to write out the ID’s via knockout’s databinding.

My JS to execute this process is simply:

var ViewModel = {
    Customer: []
};
dataService.getCustomers(function (data) {
    ViewModel.Customer = data.Customers;
    ko.applyBindings(ViewModel);
});

I can step into the getCustomers() callback and validate the JSON is coming back as above, and I can also query ViewModel.Customer and see the data assigned, but nothing gets written out.
I assumed this would be trivial, but nothing has worked thus far.

Any ideas?

Thanks

Answer 1

In:

<section id="CustomerList">
    <ul data-bind: 'foreach: data'>
        Data: <span data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></span>

        <li>
            <span data-bind="text:CustomerID"></span>
        </li>
    </ul>
</section>

Change:

<ul data-bind: 'foreach: data'>

To:

<ul data-bind: 'foreach: Customer>

And in:

dataService.getCustomers(function (data) {
    ViewModel.Customer = data.Customers;
    ko.applyBindings(ViewModel);
});

Change:

ViewModel.Customer = data.Customers;

To:

ViewModel.Customer = data.Customers.data;

Finally you need to remove the debug line with the data from within the <ul> as this is invalidating the markup.

Working sample can be viewed at http://jsfiddle.net/unklefolk/35eQQ/2/