我正在尝试使用递归循环从这样结构的对象构建一个 HTML 列表——可能的深度级别有无限多:
object = {
"directories":{
"vegetables":{
"info":{
"name":"Vegetables"
},
"files":{
},
"directories":{
"green vegetables":{
"info":{
"name":"Green Vegetables"
},
"files":{
},
"directories":{
"lettuce":{
"info":{
"name":"Lettuce"
},
"files":{
}
},
"cucumber":{
"info":{
"name":"Cucumber"
},
"files":{
}
}
}
},
"orange vegetables":{
"info":{
"name":"Orange Vegetables"
},
"files":{
},
"directories":{
"3 deep":{
"info":{
"name":"Carrot"
},
"files":{
}
}
}
}
}
},
"fruit":{
"info":{
"name":"Fruit"
},
"files":{
},
"directories":{
"apple":{
"info":{
"name":"Apple"
},
"files":{
}
}
}
}
}
}
循环应该创建一个嵌套的 html 列表,如下所示:
<ul>
<li>Vegetables
<ul>
<li>Green Vegetables
<ul>
<li>Lettuce</li>
<li>Cucumber</li>
</ul>
</li>
<li>Orange Vegetables
<ul>
<li>Carrot</li>
</ul>
</li>
</ul>
</li>
<li>Fruit
<ul>
<li>Apple</li>
</ul>
</li>
</ul>
目前我的函数看起来像这样,但目前它在第一个列表项之后卡住了,我正在努力思考如何正确地递归调用自身:
function loopFilters(val){
app.navList.push('<ul>');
$.each(val.directories, function(i, val) {
app.navList.push('<li>' + directory);
if(val){
// console.log('yes', val.directories);
app.core.addFiltersToPage(val.directories)
}
app.navList.push('</li>');
});
app.navList.push('</ul>');
}
如何重写我的函数以使用我的 Javascript 对象?
最佳答案
您可以通过获取目录对象并构建一个新的 <ul>
来采用递归方法。以名称作为值列出并检查嵌套目录属性。
function getList(directories) {
return Object
.values(directories)
.reduce((ul, { info: { name }, directories }) => {
var li = document.createElement('li');
li.appendChild(document.createTextNode(name));
ul.appendChild(li);
if (directories) {
li.appendChild(getList(directories));
}
return ul;
}, document.createElement('ul'));
}
var data = { directories: { vegetables: { info: { name: "Vegetables" }, files: {}, directories: { "green vegetables": { info: { name: "Green Vegetables" }, files: {}, directories: { lettuce: { info: { name: "Lettuce" }, files: {} }, cucumber: { info: { name: "Cucumber" }, files: {} } } }, "orange vegetables": { info: { name: "Orange Vegetables" }, files: {}, directories: { "3 deep": { info: { name: "Carrot" }, files: {} } } } } }, fruit: { info: { name: "Fruit" }, files: {}, directories: { apple: { info: { name: "Apple" }, files: {} } } } } };
document.body.appendChild(getList(data.directories));
.as-console-wrapper { max-height: 100% !important; top: 0; }
关于javascript - 遍历 Javascript 对象以构建嵌套列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51331140/