I have a JSON object having nested nodes, which can go on for any number of level. I need to display the content of a node on click of it's parent's node. It would look something like this
"node": [
{
"id": "id of the concept model",
"name": "Curcumin",
"type": "conceptmodel",
"node": [
{
"id": "group1",
"name": "Node 01",
"weight": "70",
"type": "text",
"node": [
{
"id": "group11",
"name": "Node 02",
"weight": "70",
"type": "structure",
"node": []
}
]
}
]
},
{
"id": "id of the concept model",
"name": "Abuse Resistent Technology",
"type": "conceptmodel",
"node": [
{
"id": "group1",
"name": "Category 01",
"weight": "70",
"type": "text",
"node": []
}
]
},
{
"id": "id of the concept model",
"name": "PC in Aviation",
"type": "conceptmodel",
"node": [
{
"id": "group1",
"name": "Industry",
"weight": "70",
"type": "text",
"node": [
{
"id": "group1",
"name": "Node 01",
"weight": "70",
"type": "text",
"node": []
}
]
}
]
}
]
I have done something like this for two levels :
<div class="conceptModels">
<!--tree starts-->
<ul class="tree">
<span class="treeBlk">
<li ng-repeat="conceptModel in conceptModels.node" >
<span ng-click="levelOne=true" class="textSpan show top">{{conceptModel.name}}<span class="arrclose"></span></span>
<ul ng-show="levelOne">
<li ng-repeat="node1 in conceptModel.node">
<span ng-click="levelTwo=true" class="textSpan">{{node1.name}}<span class="arrclose"></span></span>
<ul ng-show="levelTwo">
<li ng-repeat="node2 in node1.node">
<span class="textSpan">{{node2.name}}<span class="arrclose"></span> </span>
</li>
</ul>
</li>
</ul>
</li>
</span>
</ul>
</div>
Is there a way to generalize this solution to any number of level??