Отображение вложенных JSON как вложенный список с помощью knockout.js

Question

У меня есть вложенное JSON как это:

[ 
    { 
     "Run 1": { 
      "1.2.0": { 
       "Server": { 
        "TestSuite 1": [ 
         { 
          "version": "1.2.0", 
          "type": "server", 
          "testdef": "TestSuite 1", 
          "testcaseid": "TestCase 1", 
          "status": "pass" 
         }, 
         { 
          "version": "1.2.0", 
          "type": "server", 
          "testdef": "TestSuite 1", 
          "testcaseid": "TestCase 2", 
          "status": "fail" 
         } 
        ], 
        "TestSuite 2": [ 
         { 
          "version": "1.2.0", 
          "type": "server", 
          "testdef": "TestSuite 2", 
          "testcaseid": "TestCase 1", 
          "status": "pass" 
         } 
        ] 
       } 
      } 
     } 
    } 
] 

Я хочу, чтобы отобразить его на странице HTML как неупорядоченный список, как это:

но я вижу, последний элемент повторяется несколько раз:

Это HTML с knockout.j ы привязок:

<div class="row"> 
    <div class="tree"> 
    <ul data-bind="foreach: {data: testResults, as: 'item'}"> 
     <li data-bind="foreach: {data: Object.keys(item), as: 'key'}"><span data-bind="text: 'Run' + key"></span> 
     <ul data-bind="foreach: {data: item[key], as: 'item2'}" class="child"> 
      <li data-bind="foreach: {data: Object.keys(item2), as: 'key2'}"><span data-bind="text: key2"> </span> 
      <ul data-bind="foreach: {data: item2[key2], as: 'item3'}" class="child"> 
       <li data-bind="foreach: {data: Object.keys(item3), as: 'key3'}"><span data-bind="text: key3"> </span> 
       <ul data-bind="foreach: {data: item3[key3], as: 'item4'}" class="child"> 
        <li data-bind="foreach: {data: Object.keys(item4), as: 'key4'}"><span data-bind="text: key4"> </span> 
        <ul data-bind="foreach: {data: item4[key4], as: 'item5'}" class="child"> 
         <li data-bind="foreach: {data: Object.keys(item5), as: 'key5'}"><span data-bind="text: item5.testcaseid, css : {'bg-success' : item5.status == 'pass', 'bg-danger' : item5.status == 'fail'}"> </span><br></li> 
        </ul> 
        </li> 
       </ul> 
       </li> 
      </ul> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</div> 

testResults является ko.observableArray() в моей модели представления, которая содержит описанную выше JSON.

Что бы правильный способ отображения элементов листа только один раз

Answer 1

Проблема в том, что вы вложенности так много foreach привязок, которые вы заблудиться в том, как много вложенных циклов есть. Ваш последний взгляд на самый конец не нужен. Когда вы не нуждаетесь, вы прокручиваете ключи объектов тестового набора. Удалите это последнее привязку foreach.

<ul data-bind="foreach: {data: item4[key4], as: 'item5'}" class="child"> 
    <li> 
     <span data-bind="text: item5.testcaseid, 
         css : {'bg-success' : item5.status == 'pass', 
           'bg-danger' : item5.status == 'fail'}"> 
     </span><br> 
    </li> 
</ul> 

Не делайте этого. Вы действительно хотите посмотреть на эту точку зрения и попытаться ее сохранить?

У меня есть два предложения: либо отобразить результаты в массивы, либо просмотреть их, либо перебрать их только с помощью пользовательских привязок, чтобы сделать его более управляемым. Вы можете использовать это foreachprop связывания обработчика сделать это:

<ul data-bind="foreach: testResults"> 
    <li data-bind="foreachprop: $data"><span data-bind="text: key"></span> 
     <ul data-bind="foreachprop: value"> 
      <li><span data-bind="text: key"></span> 
       <ul data-bind="foreachprop: value"> 
        <li><span data-bind="text: key"></span> 
         <ul data-bind="foreachprop: value"> 
          <li><span data-bind="text: key"></span> 
           <ul data-bind="foreach: value"> 
            <li><span data-bind="text: testcaseid"></span></li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

fiddle