How to bind inner array in a table with knockout

Question

Update: It seems I forgot the most important piece of information. This wasn't in an html file, but in an xsl file. The ko comment tags were being stripped out which is why the 'Name' did not exist. I'll mark Damien's response as the answer to give him credit for leading me in the right direction by going to JSFiddle. Thanks.

Original Question:

Is there any way to bind an inner array from a JSON object in a table with knockout.js? I have tried so many different ways, and none of them seem to work. There are two similar questions:

Knockout Array of Arrays

Binding Nested Array Using Knockout foreach

But, in both cases they are using container binding. I need to use containerless binding, which doesn't seem to work.

Here is a simplified code example:

var reportData = {[
    "Category": "First Category", 
    "Id": 1, 
    "Items": [
        {"Name": "First Name"},
        {"Name": "Second Name"}
        ]
    }, {
    "Category": "Second Category",
    "Id": 2,
    "Items": [
        {"Name": "First Name"},
        {"Name": "Second Name"}
        ]
    }];

The binding code is basic (excerpt):

var viewModel = function() {
        var self = this;
        self.reportData = ko.observableArray();
    }

var vm = new viewModel();
vm.reportData(data);
ko.applyBindings(vm);

What I need is:

<tbody data-bind="foreach: reportData">
    <tr>
        <td data-bind="text: Category"></td>
    </tr>
    <!-- ko foreach: Items -->
    <tr>
        <td data-bind="text: Name"></td>
    </tr>
    <!-- /ko -->
</tbody>

I have tried many different ways to get to the inner array data, but I always get the error that 'Name' is not defined. I'm confirming in the console that I'm getting the correct data, and the outer object array values display with no problem.

What is the proper way of accessing this inner array, and displaying in a table with containerless binding for the inner array?

Damien Damien · Accepted Answer · 2013-07-01T16:22:15

Please could you take a look at this fiddle and tell me what is not working. Because for me it works well.

View :

<table>
    <tbody data-bind="foreach: reportData">
        <tr>
            <td data-bind="text: Category"></td>
        </tr>
        <!-- ko foreach: Items -->
        <tr>
            <td data-bind="text: Name"></td>
        </tr>
        <!-- /ko -->
    </tbody>
</table>

JS:

data =  [{
        "Category": "First Category",
            "Id": 1,
            "Items": [{
            "Name": "First Name"
        }, {
            "Name": "Second Name"
        }]
    }, {
        "Category": "Second Category",
            "Id": 2,
            "Items": [{
            "Name": "First Name"
        }, {
            "Name": "Second Name"
        }]
    }]
;


var viewModel = function () {
    var self = this;
    self.reportData = ko.observableArray();
}

var vm = new viewModel();
vm.reportData(data);
ko.applyBindings(vm);

How to bind inner array in a table with knockout

1 Answers