How do I loop through a complicated array of JSON objects with arrays inside it and dynamic keys?
<p>How do I loop through this <code>filteredResults</code> observableArray given that all the first keys e.g. 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. </p>

<pre><code>  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"
      }
    ]
  }]);  
</code></pre>

<p>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.</p>

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

         &lt;!--ko foreach: {data: Object.keys(result), as: 'groupHeader'}--&gt;

            &lt;li data-bind="text: groupHeader" class="nav-header disabled "&gt;&lt;/li&gt;

            &lt;!--ko foreach: {data: result[groupHeader], as: 'resultNode' }--&gt;

                 &lt;pre data-bind="text: ko.toJSON(resultNode, null, 2)"&gt;&lt;/pre&gt;

            &lt;!--/ko --&gt;
         &lt;!--/ko --&gt;
    &lt;!-- /ko --&gt;
&lt;/ul&gt;
</code></pre>

<p>This is what it prints:</p>

<pre><code>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"
}
</code></pre>

<p>As you can see it is missing the last two objects for each key. </p>

<p>What am I missing here?</p>

<p>If I do:</p>

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

<p>It prints the entire list.</p>

<p>If I do under the first foreach loop:</p>

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

<p>It prints only the key with one object.</p>