How do I loop through a complicated array of JSON objects with arrays inside it and dynamic keys?

Question

How do I loop through this filteredResults observableArray given that all the first keys eg Basic Information and Guarantees and Debt Subordination are dynamic and each key is a reference to an array of objects. All the keys inside this object on the other hand are known.

  self.filteredResults = ko.observableArray([
  {
    "Basic Information": [
      {
        "nodeId": "8",
        "path": "Bookrunners / Active Bookrunners",
        "tooltip": "Bookrunners / Active Bookrunners",
        "resultLabel": "Active Bookrunners",
        "propertyClassType": "multiselect"
      },
      {
        "nodeId": "12",
        "path": "Advisors / Auditors",
        "tooltip": "Advisors / Auditors",
        "resultLabel": "Auditors",
        "propertyClassType": "multiselect"
      },
      {
        "nodeId": "442",
        "path": "Pricing / Amount",
        "tooltip": "Pricing / Amount",
        "resultLabel": "Amount",
        "propertyClassType": "millions"
      }
    ]
  },
  {
    "Guarantees and Debt Subordination": [
      {
        "nodeId": "70",
        "path": "Guarantees / Overview of the Guarantees / Are the Notes Guaranteed?",
        "tooltip": "Guarantees / Overview of the Guarantees / Are the Notes Guaranteed?",
        "resultLabel": "Are the Notes Guaranteed?",
        "propertyClassType": "select"
      },
      {
        "nodeId": "71",
        "path": "Guarantees / Overview of the Guarantees / Are the Guarantees Secured?",
        "tooltip": "Guarantees / Overview of the Guarantees / Are the Guarantees Secured?",
        "resultLabel": "Are the Guarantees Secured?",
        "propertyClassType": "boolean"
      },
      {
        "nodeId": "80",
        "path": "Guarantees / Overview of the Guarantees / Are the Guarantees Direct or Indirect?",
        "tooltip": "Guarantees / Overview of the Guarantees / Are the Guarantees Direct or Indirect?",
        "resultLabel": "Are the Guarantees Direct or Indirect?",
        "propertyClassType": "select"
      }
    ]
  }]);  

This is what I've tried so far in my template. I can get the first keys and the first object within the array of objects but it only ever prints the first one.

<ul class="pull-left list-group index-search-results">
    <!-- ko foreach: {data: filteredResults, as: 'result'} -->

         <!--ko foreach: {data: Object.keys(result), as: 'groupHeader'}-->

            <li data-bind="text: groupHeader" class="nav-header disabled "></li>

            <!--ko foreach: {data: result[groupHeader], as: 'resultNode' }-->

                 <pre data-bind="text: ko.toJSON(resultNode, null, 2)"></pre>

            <!--/ko -->
         <!--/ko -->
    <!-- /ko -->
</ul>

This is what it prints:

Basic Information
{
  "propertyClassId": "8",
  "path": "Bookrunners / Active Bookrunners",
  "tooltip": "Basic Information / Bookrunners / Active Bookrunners",
  "resultLabel": "Active Bookrunners",
  "propertyClassType": "multiselect"
}
Guarantees and Debt Subordination
{
  "propertyClassId": "70",
  "path": "Guarantees / Overview of the Guarantees / Are the Notes Guaranteed?",
  "tooltip": "Guarantees and Debt Subordination / Guarantees / Overview of the Guarantees / Are the Notes Guaranteed?",
  "resultLabel": "Are the Notes Guaranteed?",
  "propertyClassType": "select"
}

As you can see it is missing the last two objects for each key.

What am I missing here?

If I do:

<pre data-bind="text: ko.toJSON(filteredResults, null, 2)"></pre>

It prints the entire list.

If I do under the first foreach loop:

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

It prints only the key with one object.

Answer 1

It works here:

 self = {}; self.filteredResults = ko.observableArray([ { "Basic Information": [ { "nodeId": "8", "path": "Bookrunners / Active Bookrunners", "tooltip": "Bookrunners / Active Bookrunners", "resultLabel": "Active Bookrunners", "propertyClassType": "multiselect" }, { "nodeId": "12", "path": "Advisors / Auditors", "tooltip": "Advisors / Auditors", "resultLabel": "Auditors", "propertyClassType": "multiselect" }, { "nodeId": "442", "path": "Pricing / Amount", "tooltip": "Pricing / Amount", "resultLabel": "Amount", "propertyClassType": "millions" } ] }, { "Guarantees and Debt Subordination": [ { "nodeId": "70", "path": "Guarantees / Overview of the Guarantees / Are the Notes Guaranteed?", "tooltip": "Guarantees / Overview of the Guarantees / Are the Notes Guaranteed?", "resultLabel": "Are the Notes Guaranteed?", "propertyClassType": "select" }, { "nodeId": "71", "path": "Guarantees / Overview of the Guarantees / Are the Guarantees Secured?", "tooltip": "Guarantees / Overview of the Guarantees / Are the Guarantees Secured?", "resultLabel": "Are the Guarantees Secured?", "propertyClassType": "boolean" }, { "nodeId": "80", "path": "Guarantees / Overview of the Guarantees / Are the Guarantees Direct or Indirect?", "tooltip": "Guarantees / Overview of the Guarantees / Are the Guarantees Direct or Indirect?", "resultLabel": "Are the Guarantees Direct or Indirect?", "propertyClassType": "select" } ] }]); ko.applyBindings(self); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <ul class="pull-left list-group index-search-results"> <!-- ko foreach: {data: filteredResults, as: 'result'} --> <!--ko foreach: {data: Object.keys(result), as: 'groupHeader'}--> <li data-bind="text: groupHeader" class="nav-header disabled "></li> <!--ko foreach: {data: result[groupHeader], as: 'resultNode' }--> <pre data-bind="text: ko.toJSON(resultNode, null, 2)"></pre> <!--/ko --> <!--/ko --> <!-- /ko --> </ul>