javascript - 如何通过限制每个函数来创建嵌套列表?
问题描述
我想创建一个嵌套“ul li”的列表,但将嵌套函数限制为彼此。
这是我的对象:
"data": [
{
"label": "dataName",
"sections": [
{
"label": "label sections 1",
"fields": [
{
"id": 1,
"name": "field 1",
"value": "value field 1"
},
{
"id": 2,
"name": "field 2",
"value": "value field 2"
}
]
},
{
"label": "label sections 2",
"fields": [
{
"id": 5,
"name": "field 3",
"value": "value field 3"
}
]
},
{
"label": "dataName2",
"sections": [
{
"label": "label sections 3",
"fields": [
{
"id": 6,
"name": "field 6",
"value": "value field 6"
},
{
"id": 7,
"name": "field 7",
"value": "value field 7"
}
]
},
{
"label": "label sections 4",
"fields": [
{
"id": 8,
"name": "field 8",
"value": "value field 8"
}
]
}
]
把它变成这样的列表:
<ul>
<li>dataName
<ul>
<li>label sections 1
<ul>
<li>field 1 : value field 1 </li>
<li>field 2 : value field 2 </li>
</ul>
</li>
<li>label sections 2
<ul>
<li>field 3 : value field 3 </li>
</ul>
</li>
</ul>
</li>
<li>dataName2
<ul>
<li>label sections 3
<ul>
<li>field 6 : value field 6 </li>
<li>field 7 : value field 7 </li>
</ul>
</li>
<li>label sections 4
<ul>
<li>field 8 : value field 8 </li>
</ul>
</li>
</ul>
</li>
</ul>
我试图执行一个功能,但没有多大成功!
知道如果“值字段”值为空,则不会显示
var build = function(obj) {
var list = '';
_.each(obj, function (elt) {
list+='<li><em>'+elt.label+'</em></li>';
_.each(elt.sections, function (elt) {
var list2 = '';
list2+='<li><em>'+elt.label+'</em></li>';
_.each(elt.fields, function (elt) {
var list3 = '';
if(!_.isNull(elt.value)) {
list3 += '<li><em>' + elt.name
+' ' + elt.value + '</em></li>';
}
list2+='<ul>'+list3+'</ul>';
});
list+='<ul>'+list2+'</ul>';
});
});
return '<ul style="text-align: left">'+list+'</ul>';
}
如果您知道更有效的解决方案,我很感兴趣
解决方案
您可以在带有递归函数的纯 Javascript 中使用动态方法,该函数采用列表元素数组和目标元素并创建新对象。
function createList(array, target) {
var ul = document.createElement('ul');
array.forEach(o => {
var li = document.createElement('li');
li.appendChild(document.createTextNode('id' in o
? `${o.name} : ${o.value}`
: o.label
));
if (o.sections || o.fields) createList(o.sections || o.fields, li);
ul.appendChild(li);
});
target.appendChild(ul);
}
var data = [{ label: "dataName", sections: [{ label: "label sections 1", fields: [{ id: 1, name: "field 1", value: "value field 1" }, { id: 2, name: "field 2", value: "value field 2" }] }, { label: "label sections 2", fields: [{ id: 5, name: "field 3", value: "value field 3" }] }, { label: "dataName2", sections: [{ label: "label sections 3", fields: [{ id: 6, name: "field 6", value: "value field 6" }, { id: 7, name: "field 7", value: "value field 7" }] }, { label: "label sections 4", fields: [{ id: 8, name: "field 8", value: "value field 8" }] }] }] }];
createList(data, document.body);
推荐阅读
- javascript - 如何制作表格宽度超过100%的固定表头表格
- python-3.x - 如何使用 ODBC 将 python 与 vertica 连接?
- python-2.7 - 循环上的参数化 SQL 查询未正确更新
- arrays - PowerShell 枚举一个仅包含一个内部数组的数组
- node.js - 为什么 nodejs 代码无法正确读取文件?
- ruby-on-rails - 在数据库中简单搜索
- postgresql - 意外删除了 postgres 默认超级用户权限 - 我可以使用 pgAdmin 取回它吗?
- c# - 如何使用“Directory.getFiles”获取磁盘上具有特定扩展名的所有文件并将它们保存在列表中
- html - 拨动开关滑块位置有问题
- mysql - MySQL 中两个插入的锁是如何工作的?