title: Nested foreach binding in knockoutJS
body: <p>I want to create accordions with the help of AJAX data through knockout JS foreach binding. Each Accordion group includes a table whose data is supposed to be fetched through another AJAX call when the particular accordion is clicked with the help of knockout JS click binding.</p>
  
  <p>Issue that i am facing:</p>
  
  <p>First foreach binding works well without any issues and it creates the exact number of accordion groups as per the data returned. Click binding on accordion also works well and gets correct data through AJAX call.</p>
  
  <p>However,  the moment i add the second for each binding everything falls apart. Even the years foreach binding stops rendering after the first accordion group.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="accordion" id="accordion" data-bind="foreach: years"&gt;
      &lt;div class="accordion-group"&gt;
          &lt;div class="accordion-heading"&gt;
              &lt;a class="accordion-toggle" data-parent="#accordion"
                 data-toggle="collapse" href="" data-bind="click: $parent.get_statement, attr: { href: '#' + year0,}, text: year2 + ' ' + year0 + ' - ' + year1"&gt;Financial Year
                  2014-15&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="accordion-body collapse" id="" data-bind="attr: {id: year0}"&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;table class="table"&gt;
                      &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Column A&lt;/th&gt;
                          &lt;th&gt;Column B&lt;/th&gt;
                          &lt;th&gt;Column C&lt;/th&gt;
                          &lt;th&gt;Column D&lt;/th&gt;
                          &lt;th&gt;Column E&lt;/th&gt;
                          &lt;th&gt;Column F&lt;/th&gt;
                      &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody data-bind="foreach: statements"&gt;
                      &lt;tr&gt;
                          &lt;td data-bind="text: A"&gt;cell is row 0, column 0&lt;/td&gt;
                          &lt;td data-bind="text: B"&gt;cell is row 0, column 1&lt;/td&gt;
                          &lt;td data-bind="text: C"&gt;cell is row 0, column 2&lt;/td&gt;
                          &lt;td data-bind="text: D"&gt;cell is row 0, column 3&lt;/td&gt;
                          &lt;td data-bind="text: E"&gt;cell is row 0, column 4&lt;/td&gt;
                          &lt;td data-bind="text: F"&gt;cell is row 0, column 5&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS Code: </p>
  
  <pre><code>this.years = ko.observableArray();
  this.statements = ko.observableArray();
  
  $.ajax({
              url: "site_api/user_data.php",
              type: "get",
              data: {data_type: getParam("id"), request_type: "account_statement_years", data_value: 0},
              cache: false,
              success: function(result) {
                  var data = $.parseJSON(result);
                  self.years(data);
              }
          });
  
          this.get_statement = function() {
              var c = self.years.indexOf(this);
              $.ajax({
                  url: "site_api/user_data.php",
                  type: "get",
                  data: {data_type: getParam("id"), request_type: "account_statement_data", data_value: self.years()[c].year0},
                  cache: false,
                  success: function(result) {
                      var data = $.parseJSON(result);
                      self.statements(data);
                  }
              });
          };
  </code></pre>
  
  <p>Sample Data:</p>
  
  <pre><code>Years: [{year0: 2015, year2:16, year3: ABC},{year0: 2014, year2:15, year3: DEF},{year0: 2013, year2:14, year3: GHI}]
  </code></pre>
  
  <p>Statements:</p>
  
  <pre><code>[{"A":"AQA", "B":"BQB", "C":"CQC", "D":"DQD", "E":"EQE", "F":"FQF"},
  {"A":"AQA", "B":"BQB", "C":"CQC", "D":"DQD", "E":"EQE", "F":"FQF"},
  {"A":"AQA", "B":"BQB", "C":"CQC", "D":"DQD", "E":"EQE", "F":"FQF"}]
  </code></pre>