如何使用knockoutJs将javascript对象数组绑定到表

Question

 I have a GetMainTestResuls mothed that returns the following data using pre tab.

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

[
 [],
 [
  {
     "groupTestName": "Test Group 1",
    "groupTestData": [
    {
      "sectionName": "Section 1",
      "testName": "Test Group 1",
      "totalPassExpect": 10,
      "totalPassRate": "100.00",
      "totalDuration": "30:44:25",
      "loopPassExpected": 10,
      "loopPassRate": "10%",
      "loopDuration": "70:44:25"
    },
    {
      "sectionName": "Section 1",
      "testName": " Test Group 1",
      "totalPassExpect": 200,
      "totalPassRate": "99.50",
      "totalDuration": "01:39:53",
      "loopPassExpected": 100,
      "loopPassRate": "99.00",
      "loopDuration": "600:55:28"
    },
    {
      "sectionName": " Section 1",
      "testName": " Test Group 1",
      "totalPassExpect": 300,
      "totalPassRate": "99.67",
      "totalDuration": "02:27:57",
      "loopPassExpected": 100,
      "loopPassRate": "10.00",
      "loopDuration": "400:48:04"
    }
  ]
  },
  {
  "groupTestName": "Test Group 2",
  .....
    and I am trying to bind this data to my table body as the following. 
   <!-- ko foreach: GetMainTestResult -->
                 <!-- ko if:$data.length > 0 -->                
                    <div class="SubHeaderFont col-lg-offset-2 headerTitle">Main Test</div>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                              ... 
                            </tr>
                        </thead>
                        <tbody>
                            <!-- ko foreach: $data.groupTestData -->
                            <!-- ko if: $index() == 0 -->

                            <tr>
                                <td>Section<span data-bind="text: $data.sectionName"></span></td>
                                <td data-bind="text: $data.totalPassExpect"></td>
                                <td data-bind="text: $data.totalPassRate"></td>
                                <td data-bind="text: $data.totalDuration"></td>
                                <td data-bind="text: $data.loopPassExpected"></td>
                                <td data-bind="text: $data.loopPassRate"></td>
                                <td data-bind="text: $data.loopDuration"></td>
                            </tr>
                            <!-- /ko -->
                            <tr>
                                <td data-bind="text: $data.testName"></td>
                                <td data-bind="text: $data.totalPassExpect"></td>
                                <td data-bind="text: $data.totalPassRate"></td>
                                <td data-bind="text: $data.totalDuration"></td>
                                <!-- ko if:$index() > 0 -->
                                <td data-bind="text: $data.loopPassExpected"></td>
                                <td data-bind="text: $data.loopPassRate"></td>
                                <td data-bind="text: $data.loopDuration"></td>
                                <!-- /ko -->
                            </tr>
                            <!-- /ko -->
                        </tbody>
     ....
            <!-- /ko -->
        <!-- /ko-->

我的viewModel工作正常，我绑定到其他对象的表头也可以正常工作但是表体没有显示除表头之外的任何数据。这有什么不对？你能帮忙吗？

Answer 1

您希望$data成为此处的测试组：

<!-- ko foreach: $data.groupTestData -->

但它是一组测试组，由：

定义

<!-- ko foreach: GetMainTestResult -->

您缺少另一个循环，因为GetMainTestResult是一组测试组数组。

编辑：

例如，您可以为每个测试组显示一个表格，如下所示：

1 - <!-- ko foreach: GetMainTestResult -->循环测试组
  2 - <!-- ko foreach: groupTestData -->循环测试组数据

<!-- ko foreach: GetMainTestResult -->
    <!-- ko if:$data.length > 0 -->
    <!-- ko foreach: $data -->              <!-- *** the new loop *** -->
    <div class="SubHeaderFont col-lg-offset-2 headerTitle"
         data-bind="text: groupTestName">
    </div>
    <table class="table table-bordered">
        <thead>
            <tr>
              ... 
            </tr>
        </thead>
        <tbody>
        <!-- ko foreach: groupTestData -->
            <!-- ko if: $index() == 0 -->
            <tr>
                <td>Section<span data-bind="text: $data.sectionName"></span></td>
                <td data-bind="text: $data.totalPassExpect"></td>
                <td data-bind="text: $data.totalPassRate"></td>
                <td data-bind="text: $data.totalDuration"></td>
                <td data-bind="text: $data.loopPassExpected"></td>
                <td data-bind="text: $data.loopPassRate"></td>
                <td data-bind="text: $data.loopDuration"></td>
            </tr>
            <!-- /ko -->
            <tr>
                <td data-bind="text: $data.testName"></td>
                <td data-bind="text: $data.totalPassExpect"></td>
                <td data-bind="text: $data.totalPassRate"></td>
                <td data-bind="text: $data.totalDuration"></td>
                <!-- ko if:$index() > 0 -->
                <td data-bind="text: $data.loopPassExpected"></td>
                <td data-bind="text: $data.loopPassRate"></td>
                <td data-bind="text: $data.loopDuration"></td>
                <!-- /ko -->
            </tr>
        <!-- /ko -->
        </tbody>
    <!-- /ko -->
    <!-- /ko-->
<!-- /ko-->