<output id="output"></output>

/*** comment ***/

var catalog = [
 {name :"level-1", _id:"level-1", parent_id:"null",is_file: false},
 {name :"level-2", _id:"level-2", parent_id:"level-1", is_file: false},
 {name :"brother", _id:"brother", parent_id:"level-2", is_file: false},
 {name :"mama", _id:"mama", parent_id:"level-2", is_file: false},
 {name :"sister", _id:"sister", parent_id:"mama", is_file: false},
 {name :"papa", _id:"papa", parent_id:"level-2", is_file: false},
 {name :"html-1.html", _id:"html-1.html", parent_id:"level-1", is_file: true},
 {name :"html2.html", _id:"html2.html", parent_id:"papa", is_file: true},
 {name :"html4.html", _id :"html4.html", parent_id:"papa", is_file: true},
 {name :"show.html", _id :"show.html", parent_id :"mama", is_file: true}
];

var startlevel = "level-1"; //comment
var root = {name: startlevel, _id: startlevel, children:[]};
var tree = {root:root}
/* comment */
function getParent(node, root){
for(var i in node.children){
var child = node.children[i];
if(child._id === root) return child;
if(child.children.length > 0)
var childResult = getParent(child,root);
if(childResult != null) return childResult;
} 
if(node._id === root) return node;
}

function buildTree(tree){
for(var i in catalog){
var elem = catalog[i];
if(elem.name === startlevel) continue;
elem.children = [];
var root = elem.parent_id;
var parent = getParent(tree.root,root);
parent.children.push(elem);
}
}

function displayTree(node){
var str ='';
var clasName=(node.is_file ? "lightblue" : "lightgreen");
if(node.children.length > 0){ str +='<details><summary>'+node.name'</summary><ul class="pi">';}
 else { if(!node.is_file) str+= node.name;}

for(var i in node.children){
var bas =(node.children[i].is_file ? "lightgreen" : "lightblue")
str+='<li class='+bas'>';
if(node.children[i].is_file) str+= node.children[i].name;
str+= displayTree(node.children[i]);
str+='</li>';
}
if(node.children.length > 0) str+='</ul></details>';
return str;
}

buildTree(tree);
output.innerHTML = displayTree(tree.root);