const data = [
{
id: 1122031,
title: "Banner",
children: [
{
id: 1122032,
title: "prod 1"
},
{
id: 1122033,
title: "prod 2"
},
{
id: 1122034,
title: "prod 3"
},
{
id: 1366085,
title: "prod 6",
children: [
{
id: 1362085,
title: "prod 16"
}
]
}
]
}
];
function createTree(data, defaultId) {
const ul = document.createElement("ul");
data.map((item, index) => {
const li = document.createElement("li");
li.textContent = item.id;
if (item.children) {
li.appendChild(createTree(item.children, index));
}
ul.appendChild(li);
});
return ul;
}
<ul>
<li>
children
<ul>
<li>
0_children
<ul>
<li>0_children_0</li>
<li>0_children_1</li>
<li>0_children_2</li>
<li>
0_children_3
<ul>
<li>
0_children_3_children_0
</li>
<li>
0_children_3_children_1
</li>
</ul>
</li>
</ul>
</li>
<li>
1_children
</li>
</ul>
</li>
</ul>
const createTree = (data, index = []) =>
data.reduce((ul, { children: c }, i) => {
index.push(i);
const li = document.createElement('li');
li.innerText = index.join('_');
if (Array.isArray(c) && c.length) {
li.appendChild(createTree(c, index));
}
ul.appendChild(li);
index.pop();
return ul;
}, document.createElement('ul'));
// или
const createTree = (data, index = []) =>
data instanceof Array && data.length
? `<ul>${data.map((n, i) => `
<li>
${(index.push(i), index.join('_'))}
${createTree(n.children, index)}
${(index.pop(), '')}
</li>`).join('')}
</ul>`
: '';
function createTree(data, defaultId, parentIds = '') {
const ul = document.createElement("ul");
data.map((item, index) => {
const li = document.createElement("li");
const id = [parentIds, item.id].join('_')
li.textContent = id;
if (item.children) {
li.appendChild(createTree(item.children, index, id));
}
ul.appendChild(li);
});
return ul;
}