如何遍歷一個復雜的JSON對象數組，其中包含數組和動態鍵？

Question

假設所有的第一個鍵（例如基本信息和擔保和債務從屬）都是動態的，並且每個鍵都是對對象數組的引用，那么如何循環遍歷filteredResults observableArray。 另一方面，該對象內部的所有鍵都是已知的。

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

到目前為止，這是我在模板中嘗試過的內容。 我可以在對象數組中獲得第一個鍵和第一個對象，但是它只能打印第一個鍵。

<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>

它是這樣打印的：

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"
}

如您所見，它缺少每個鍵的最后兩個對象。

我在這里想念什么？

如果我做：

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

它打印整個列表。

如果我在第一個foreach循環下進行：

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

它僅打印帶有一個對象的鍵。

Answer 1

它在這里工作：

 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>