How to loop over nested arrays in knockout

Question

Consider the following object:

[{
  key: 'value',
  amounts: [{key: 'value}]
}]

This array is tied to a observableArray, we will call this foo.

self.foo = ko.observableArray([{
  key: 'value',
  amounts: [{key: 'value}]
}])

Then we can do:

  <div id="something" data-bind="foreach: foo">
    <div class="somethingElse">
        // How do I get the amounts here?
    </div>
  </div>

So how would I, inside the element, get "amounts"? would it be:

data-bind="foreach: foo.amounts"

Seems logical to me ...

So you dont want internet points? How am I suppose to accept this? Also more explanation as to how it knows about nested arrays please. — TheWebs
– TheWebs, Commented Dec 15, 2015 at 0:15

Michael Best · Accepted Answer · 2015-12-15 00:43:40Z

1

When using the foreach binding, the inner HTML is repeated and each section is bound to an item from the array. It is bound as a "child" context" and so can directly access the properties of the array item.

Since the object bound to the inner HTML is

{
  key: 'value',
  amounts: [{key: 'value}]
}

You can use the properties directly

data-bind="foreach: amounts"

answered Dec 15, 2015 at 0:43

Michael Best

16.7k1 gold badge40 silver badges72 bronze badges

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

Collectives™ on Stack Overflow

How to loop over nested arrays in knockout

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related