递归和html渲染

Question

需要您的帮助。我尝试使用递归来呈现一个HTML列表，但遇到了问题。请提示如何解决此问题。对不起，我是js新手。需要获取嵌套列表。如果你的对象中有一个子列表，你必须创建一个子列表(使用ul标签并在这里发布所有使用li标签的行(

function recursion(value) {
if (Array.isArray(value)) {
let subStr = '';
subStr += '<ul>' + value.map(
item => (`<li id=${item.id}>${item.subList ? recursion(item.subList) : item.text}</li>`)) + '</ul>'
console.log(subStr)
return subStr.split(',').join('')
} else {
let str = '';
for (let subValue of Object.values(value)) {
str += recursion(subValue)
}
body.insertAdjacentHTML('afterbegin', str);
}
}

console.log(recursion(initState)) 

const initState = {
elements: [
{id: 0, text: 'yo'},
{id: 1, text: 'ku'},
{
id: 2, text: 'mu', subList: {
elements: [{id: 2 - 1, text: 'sublist-mu-1'}, {id: 2 - 2, text: 'sublist-mu-2'}]
}
},
{
id: 3, text: 'zu', subList: {
elements: [{
id: 3 - 1, text: 'sublist-zu', subList: {
elements: [{id: 3 - 1 - 1, text: 'subList-zu-zu-1'}, {id: 3 - 1 - 2, text: 'subList-zu-zu-2'}]
}
}]
}
}
]
}

Answer 1

我有一种感觉，这不是你想要的，但它与评论中提到的输出相匹配：

const convert = (es) => es .map (({id, text, subList}) => [
String(id),
text,
...(subList ?.elements ?.length ? [convert (subList .elements)] : [])
])

const elements = [{id: 0, text: 'yo'}, {id: 1, text: 'ku'}, {id: 2, text: 'mu', subList: {elements: [{id: 2 - 1, text: 'sublist-mu-1'}, {id: 2 - 2, text: 'sublist-mu-2'}]}}, {id: 3, text: 'zu', subList: {elements: [{id: 3 - 1, text: 'sublist-zu', subList: {elements: [{id: 3 - 1 - 1, text: 'subList-zu-zu-1'}, {id: 3 - 1 - 2, text: 'subList-zu-zu-2'}]}}]}}]

console .log (convert (elements))

.as-console-wrapper {max-height: 100% !important; top: 0}

这个简单的函数生成Stringid、文本，如果您有一个包含元素的subList，还生成一个子数组。

如果你真的想生成HTML，就像标签所建议的那样，就像你自己的尝试一样，那么请编辑你的帖子，包括你试图生成的输出。