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.

Mark Robinson · Accepted Answer · 2012-03-12 16:35:34Z

9

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.

edited Mar 12, 2012 at 16:35

answered Mar 12, 2012 at 16:25

Mark Robinson

13.3k13 gold badges66 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Dixon Over a year ago

Thank you for this, I'm going to go down the route of the foreach bindings (even if there's only 1 element in my arrays) as it just seems to make life easier.

Collectives™ on Stack Overflow

Knockout JS - Multidimensional observableArrays and displaying sub-array data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related