[
{
"id": 1,
"parent_id": null,
"children": [
{
"id": 2,
"parent_id": 1,
"children": []
},
{
"id": 3,
"parent_id": 1,
"children": [
{
"id": 4,
"parent_id": 3,
"children": []
}
]
}
]
}
]
<ul id="organisation">
<li>1
<ul>
<li>2</li>
<li>3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
var arr1 = [{
"id": 1,
"parent_id": null,
"children": [{
"id": 2,
"parent_id": 1,
"children": []
},
{
"id": 3,
"parent_id": 1,
"children": [{
"id": 4,
"parent_id": 3,
"children": []
}]
}
]
}];
recBuild(document.querySelector("#organisation"),arr1);
function recBuild(parentUl,arr){
arr.forEach((el)=>{
var li = document.createElement("li");
li.innerHTML = el.id;
if(el.children.length > 0 ){
var ul = document.createElement("ul");
recBuild(ul,el.children);
li.append(ul);
}
parentUl.appendChild(li);
});
}
<ul id="organisation"></ul>