使用 knockout.js 将嵌套 JSON 显示为嵌套列表
Displaying nested JSON as nested list using knockout.js
我有一个像这样的嵌套 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.js 绑定:
<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。
只显示一次叶元素的正确方法是什么
问题是您嵌套了如此多的 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>
不要这样做。您真的想要查看该视图并尝试维护它吗?
我有两个建议,要么将结果映射到数组并在这些数组上进行 foreach,要么在自定义绑定的帮助下单独迭代属性以使其更易于管理。您可以使用此 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>
我有一个像这样的嵌套 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.js 绑定:
<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。
只显示一次叶元素的正确方法是什么
问题是您嵌套了如此多的 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>
不要这样做。您真的想要查看该视图并尝试维护它吗?
我有两个建议,要么将结果映射到数组并在这些数组上进行 foreach,要么在自定义绑定的帮助下单独迭代属性以使其更易于管理。您可以使用此 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>