Question

I have a bootstrap accordion that obtains it’s header info from JSON, within each accordion pane I have a table, and the information for each table also get’s populated with JSON.

The issue I have is that the all of the table data populates within the first accordion pane.
It does not move on to the secondary table and populate the information in there, my JSON data does include ID’s so it is possible to navigate between the items just not sure how.

Here is Some of the code:

<div class="well">

  </div>
  <div data-bind="attr: {id: 'collapse'+$index()}" class="accordion-body collapse">
    <div class="accordion-inner">
      <div id="injectbody">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>ContentID</th>
              <th>Content</th>
              <th>Qty To Assign</th>
            </tr>
          </thead>
          <tbody data-bind="foreach: Locations">
            <tr>
              <td id="Lot" data-bind="text: ContentID"></td>
              <td id="Area" data-bind="text: Content"></td>
              <td id="QtyToAssign">
                <input type="text" />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

And the JQuery to make it all work:

   var data = {
  "d": [{
    "__type": "Sample",
      "ItemID": "1",
    "ItemName": "First Item",
      "QtyUnassigned": 10
  }, {
    "__type": "Sample",
      "ItemID": "2",
    "ItemName": "Second Item",
      "QtyUnassigned": 15
  }]
};

var data2 = {
  "d": [{
    "__type": "Sample2",
      "ItemID": 1,
      "ContentID": "1",
      "Content": "This Is The First Item Content"
  }, {
    "__type": "Sample2",
      "ItemID": 2,
      "ContentID": "2",
      "Content": "This Is The Second Item Content"
  }]
};

var ProductViewmodel;
//debugger; 

//Binds ViewModel
function bindProductModel(Products) {
  var self = this;
  self.items = ko.mapping.fromJS([]);
  ProductViewmodel = ko.mapping.fromJS(Products.d, self.items);
  console.log(ProductViewmodel());
}

//Binds First DataSet
function bindModel(vm, data) {
  var self = this;
  vm.Locations = ko.mapping.fromJS(data.d);
  console.log(ProductViewmodel());
}

//Starting Function
$(document).ready(function () {
  bindProductModel(data);
  bindModel(ProductViewmodel()[0], data2);
  ko.applyBindings(ProductViewmodel);
});

I have also created this Fiddle to demonstrate what I am trying to get to.

Answer 1

Your error is that since your ViewModel is actually an array, you are only binding Locations to the first element of your variable ProductViewmodel here.

bindModel(ProductViewmodel()[0], data2);

This means you have something like…

[0].Locations = [],
[1].Locations = undefined

Thus throwing an error when binding your markup (see the console in your fiddle).

In a related note, your variable naming is extremely misleading. ProductViewmodel is an array, yet you name it as ViewModel and you applyBindings to it.

I would recommend you to give Learn KnockoutJS a review. Also, stick to conventions, when variable naming pick camelCase, or underscore_case, or PascalCase or something, but just don’t mix them. Finally, if you have functions that do something only applicable for specific objects, try to use a better name other than bindModel like bindLocationsToModel.