How can I access index variable from outer foreach loop in knockout

Question

I am able to access outer foreach loop's index till 2 levels, but at the third level, it is not working. The following code, how to get the index of the first foreach loop in the innermost foreach loop:

<!-- ko foreach: Clauses-->
<!-- ko foreach: ClauseRepeatingSections -->
<!-- ko foreach: RepeatingSectionElements -->
    How to get Clauses item index here?

does this solve your problem? http://stackoverflow.com/questions/26167245/knockoutjs-foreach-3rd-nested-level-not-working — software_writer, Feb 23 '16 at 17:00
Or this? http://stackoverflow.com/a/11013401/392102 `$parentContext.$parentContext.$index()` — Roy J, Feb 23 '16 at 17:47
Please mark the solution answered if your problem has been resolved or elaborate on the issue if not. Thank you. — Sam, Mar 17 '16 at 10:58

score 3 · Accepted Answer · answered Feb 23 '16 at 20:23

basically to go 2 levels up you go

$parentContext.$parentContext.$index()

Please see the following example https://jsfiddle.net/wgsdddtj/

var viewModel = function () {
 var self = this;
  
  var Product = function (name, products) {
   var pSelf = this;
    pSelf.name = ko.observable(name);
    pSelf.items = ko.observableArray(products);
  };
  
  self.products = ko.observableArray([
   new Product("product1", [
     new Product("product1a", [
       new Product("product1aI", []),
        new Product("product1aII", [])
      ]),
      new Product("product1b", [
       new Product("product1bI", []),
        new Product("product1bII", [])
      ])
     ]),
    new Product("product2", [
     new Product("product2a", [
       new Product("product2aI", [])
      ]),
      new Product("product2b", [
       new Product("product2bI", [])
      ])
     ])
  ]);
};

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul data-bind="foreach: { data: products, as: 'level1' }">
  <li>
    <span data-bind="text: name"></span>
    <ul data-bind="foreach: { data: items, as: 'level2' }">
      <li>
        <span data-bind="text: name"></span>
        <ul data-bind="foreach: { data: items, as: 'level3' }">
          <li>
            <span data-bind="text: name"></span> - lvl1: 
            <span data-bind="text: $parentContext.$parentContext.$index()"></span> - lvl2:
            <span data-bind="text: $parentContext.$index()"></span> - lvl3:
            <span data-bind="text: $index()"></span>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

score 1 · Answer 2 · answered Feb 24 '16 at 15:42

In order to have the code comprehensive, i would suggest using the foreach like this:

<!-- ko foreach: { data: Clauses, as: 'clause' } -->
    <!-- ko foreach: { data: clause.ClauseRepeatingSections, as: 'repeatingSection' } -->
        <!-- ko foreach: { data: repeatingSection.RepeatingSectionElements, as: 'element' } -->
            // each of the current level is now stored in the variable you called it in 'as' parameter. To access the current clause:
            clause.anyPropertyOrFunction
        <!-- /ko -->
    <!-- /ko -->
<!-- /ko -->

I'm sorry, you are completely right if we're talking about accessing the Clauses's properties, but if we want the `$index()` observable we have to go about my answer, `$parentContext.$parentContext.$index()` — Sam, Feb 24 '16 at 20:22

How can I access index variable from outer foreach loop in knockout

2 Answers2