Knockout.js loop over children of parent in table - json

Question

My MVVM looks like this:
<script type="text/javascript">
function Company(data) {
this.name = ko.observable(data.name);
this.legal_form = ko.observable(data.legal_form);
this.company_number = ko.observable(data.company_number);
this.type_account = ko.observable(data.type_account);
this.type_supplier = ko.observable(data.type_supplier);
this.type_competitor = ko.observable(data.type_competitor);
this.type_other = ko.observable(data.type_other);
this.children = ko.observableArray(data.child);
}
function CompanyListViewModel() {
// Data
var self = this;
self.companies = ko.observableArray([]);
$.getJSON(Routing.generate('contacts_companies_get_json'), function(allData) {
var mappedCompanies = $.map(allData, function(item) { return new Company(item) });
self.companies(mappedCompanies);
});
}
ko.applyBindings(new CompanyListViewModel());
</script>
My View looks like this:
<tbody data-bind="foreach: companies">
<tr>
<td>
<a href="#" class="title">
<span data-bind="text: name"></span> <span data-bind="text: legal_form"></span>
</a>
</td>
<td data-bind="if:$data.company_number"><span data-bind="text: company_number"></span></td>
<td><span data-bind="if: type_account" ><i class="icon-check"></i></span></td>
<td><span data-bind="if: type_supplier" ><i data-bind="if: type_supplier" class="icon-check"></i></span></td>
<td><span data-bind="if: type_competitor" ><i data-bind="if: type_competitor" class="icon-check"></i></span></td>
<td><span data-bind="if: type_other" ><i data-bind="if: type_other" class="icon-check"></i></span></td>
<td>Details</td>
</tr>
</tbody>
I would like to add hidden <tr> for every child that a parent company has and add a plus sign before the parent to expand the hidden .
The problem is that I can only access the child within the original parent <tr> otherwhise will tell me "children" is not defined.
Any suggestions on how to achieve this?

Answer 1

You can use the foreach without a container element to display the children:
<tbody data-bind="foreach: companies">
<tr>
<!-- company columns -->
</tr>
<!-- ko foreach: children -->
<tr>
<!-- children columns -->
</tr>
<!-- /ko -->
</tody>
And with the help of a new property (like showChildren on the Company) you can do the show hide of the childrens:
Demo JSFiddle.
If you want to display the full hierarcy with the same columns so you want to have to display the children of the child campanies you can achieve with recursive templates.
There were some questions about recursive templates latelly:
Recursive template with knockout js
Working with Knockout 'foreach' looping through multidimensional array