我面临将 JavaScript 对象转换为多级列表元素的问题。
输入 JavaScript 对象
let data = [
{level: 1, content: 'First Lvl', link:'#'},
{level: 2, content: 'Second Lvl', link:'#'},
{level: 3, content: 'Third Lvl', link:'#'},
{level: 2, content: 'Second Lvl 2', link:'#'},
{level: 1, content: 'First Lvl 2', link:'#'}
];
输出:
<ul>
<li>
<a href="#">First Lvl</a>
<ul>
<li>
<a href="#">Second Lvl</a>
<ul>
<li>
<a href="#">Third Lvl</a>
</li>
</ul>
</li>
<li>
<a href="#">Second Lvl 2</a>
</li>
</ul>
</li>
<li>
<a href="#">First Lvl 2</a>
</li>
</ul>
我在 JQuery 中发现了一个几乎相似的代码 - http://jsfiddle.net/tkfeo6p2/
我尝试使用纯 JavaScript 编写此代码。但失败了。
var output = {}
var last_depth = 1;
data.forEach(function(val) {
var depth;
depth = val.level;
if (depth > last_depth) {
output[depth] = val.content;
}
output[depth] = val.content;
return last_depth = depth;
});
console.log(output)
希望这是您正在寻找的解决方案。
请找到相同的步骤。
[
{
"level": 1,
"content": "First Lvl",
"link": "#",
"child": [
{
"level": 2,
"content": "Second Lvl",
"link": "#",
"child": [
{
"level": 3,
"content": "Third Lvl",
"link": "#",
"child": []
}
]
},
{
"level": 2,
"content": "Second Lvl 2",
"link": "#",
"child": []
}
]
},
{
"level": 1,
"content": "First Lvl 2",
"link": "#",
"child": []
}
]
请在下面找到工作小提琴。
let data = [
{ level: 1, content: 'First Lvl', link: '#' },
{ level: 2, content: 'Second Lvl', link: '#' },
{ level: 3, content: 'Third Lvl', link: '#' },
{ level: 2, content: 'Second Lvl 2', link: '#' },
{ level: 1, content: 'First Lvl 2', link: '#' }
];
const formattedNode = data.reduce((acc, curr) => {
if(acc.length > 0 && curr.level !== 1) {
let node = acc;
let index = curr.level;
while (index > 1) {
node = node[node.length - 1].child;
index--;
}
node.push({ ...curr, child: [] });
} else {
acc.push({ ...curr, child: [] });
}
return acc;
}, []);
let templateStr = '<ul>';
formattedNode.forEach((node) => templateStr += parseNode(node));
templateStr += '</ul>';
function parseNode(node) {
let tmpStr = '<li>';
tmpStr += `<a href="${node.link}">${node.content}</a>`;
if (node.child.length) {
tmpStr += '<ul>';
node.child.forEach((childNode) => {
tmpStr += parseNode(childNode);
})
tmpStr += '</ul>';
}
tmpStr += '</li>';
return tmpStr;
}
console.log(templateStr)
document.getElementById('target').innerHTML = templateStr;
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句