Knockout JS - Multidimensional observableArrays and displaying sub-array data

Question

I'm close to going nuts about this now and figured it'd be simple, however, there must be something I'm missing...

I've got a multidimensional array in a ko.observableArray, in which is so:

Site -> Company -> Job

For my data binds, data-bind="text: Site().Name" is fine, as you would expect. However, I can't access the sub-arrays by data-bind="text: Site().Company().Name" or data-bind="text: Site().Company.Name".

Has anyone else had the same issue, or is there something I'm doing drastically wrong? The objects are 100% being loaded into the array properly as I can see them in the console.

Answer 1

If I understand your problem correctly and a Site contains an observableArray of Company objects and each Company object contains an observableArray of Job objects, then your approach will not work.

data-bind="text: Site().Company().Name" is trying to get the Name property of an observableArray that happens to contain Company objects. You could however write data-bind="text: Site().Company()[0].Name" to get the name of the first Company.

A more common approach would be to iterate through the items. Something like:

<!-- ko with: Site -->
Site name is <span data-bind="text: Name"/>
<ul>
  <!-- ko foreach: Company -->
    <li>Company name is <span data-bind="text: Name"/>
      <!-- ko foreach: Job -->
        <li>Job name is <span data-bind="text: Name"/>
        </li>
      <!-- /ko -->
    </li>
  <!-- /ko -->
</ul>
<!-- /ko -->

See http://knockoutjs.com/documentation/foreach-binding.html for more details.

Hope this is what you are looking for and apologies if I have misunderstood your question.