JSFiddle - React, Tailwind, and code Playground
HTML
<div id="hierarchy">
</div>
JavaScript
var json= [
{
"labelName": "Folder1",
"type":"folder",
"param": "param1",
"subMenu": [
{"labelName": "SubFolder1", "param": "param1-1", "subMenu": [
{"labelName": "SubSubFolder1", "param": "param1-1-1","subMenu": [],"type":"folder"},
{"labelName": "SubSubFolder2", "param": "param1-1-2" ,"subMenu": [],"type":"folder"},
{"labelName": "SubSubFolder2", "param": "param1-1-3","subMenu": [],"type":"folder"}
],
"type":"folder"},
{"labelName": "SubFolder2", "param": "param1-2","subMenu": [],"type":"folder"}
]
},
{"labelName": "Folder2", "param": "param2","subMenu": [],"type":"folder"},
{"labelName": "Folder3", "param": "param3","subMenu": [],"type":"folder"},
{"labelName": "File4", "param": "param4","subMenu": [],"type":"file"},
{"labelName": "File5", "param": "param5","subMenu": [],"type":"file"},
{"labelName": "File6", "param": "param6","subMenu": [],"type":"file"}
];
html = "";// The returned object.
function parseIssues(issues) {
alert(issues);
html += "<ul class='list'>";
// document.getElementById("main-list").addClass('submenu');
for (var i = 0; i < issues.length; i++) {
var issue = issues[i];
if(issue.type == 'folder' && issue.subMenu.length > 0){
html += "<li class='foldercontainer'><i class='folder icon'></i><div class='content'><div class='header'><a href='#' id='"+JSON.stringify(issue.subMenu)+"' class='folder "+ issue.labelName +"' data-active='0'>" + issue.labelName + "</a></div></div></div>";
}
else if(issue.type == 'folder' && issue.subMenu.length == 0){
html += "<li class='foldercontainer'><i class='folder icon'></i><div class='content'><div class='header'><a href='#' class='folder' data-active='1'>" + issue.labelName + "</a></div></div></div>";
}
else{
html += "<li class='foldercontainer' data-active='0'><a href='#'...