Q:

Initializing a Bootstrap accordion menu in Knockout

Here is my example of an accordion menu that should that should use data in a format compatible with JSON.  I have a data structure, but the binding between the data and the HTML doesn't work.  What corrections should I make to display this multilevel structure in a 2-level menu? 

var confItems = {
  "children":ko.observableArray()
};
var childrenLength = 3;
console.log("A",confItems);
for (var i = 0; i < childrenLength; i++) {
  confItems.children.push({
    "idhash": ko.observable("#col-" + (i + 1)),
    "id": ko.observable("col-"+ (i + 1)),
    "displayLabel": ko.observable("Item " + (i + 1)),
    "children": ko.observableArray()
  });
  console.log("B",confItems);
  for (var j = 0; j < childrenLength; j++) {
    confItems.children()[i].children().push({
      "idhash": ko.observable("#col-" + (i + 1) + "-" + (j + 1)),
      "id": ko.observable("col-" + (i + 1) + "-" + (j + 1)),
      "displayLabel": ko.observable("Item " + (i + 1) + "."  + (j + 1)),
      "children": ko.observableArray()
    });
    console.log("C",confItems);
  }
  console.log("D",confItems);
}
console.log(confItems);
var viewModel = function() {
  this.tree = ko.observable(confItems);
};
ko.applyBindings(new viewModel());
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div class="panel-group">
  <div id="accordion" class="panel panel-default" data-bind="foreach: { data: tree.children, as: child}">
    <div class="panel-heading">
      <h4 class="panel-title">
         <a data-toggle="collapse" data-parent="#accordion"
          data-bind="text:child.displayLabel, attr:{href:child.idhash}">First level</a>
        </h4>
    </div>
    <div data-bind="attr:{id:child.id}" class="panel-collapse collapse">
      <div class="panel-body" data-bind="foreach: { data: child.children, as: child}">
        <div class="panel-heading">
          <a data-bind="text:child.displayLabel">Second level</a>
        </div>
      </div>
    </div>
  </div>
</div>

A:

You should:

separate your foreach arguments with commas and as @Roy J wrote below, child should be in quotes like:
"foreach: { data: tree.children, as: 'child'}" instead of foreach: { data: tree.children as: child}
Change this.tree = ko.observable(confItems); to this.tree = confItems;

Check fiddle - Fiddle

