Issue
I have to loop through the nested/multilevel JSON object and need to create a multilevel menu.
This is the final UI view. it need to bind name, link and icon for each category .
I will get JSON object in this format from backend::
{
"data": [
{
"subMenu": [
{
"subMenu": [
{
"name": "Change Password",
"link": " ",
"icon": ""
},
{
"name": "Menu Rights",
"link": " ",
"icon": ""
},
{
"name": "User Branch Rights",
"link": " ",
"icon": ""
},
{
"name": "User Setup",
"link": " ",
"icon": ""
}
],
"name": "User Maintanace",
"icon": ""
}
],
"name": "Administration",
"icon": ""
},
{
"subMenu": [
{
"subMenu": [
{
"name": "Area List",
"link": " ",
"icon": ""
},
{
"name": "City List",
"link": " ",
"icon": ""
},
{
"name": "Country List",
"link": " ",
"icon": ""
},
{
"name": "District List",
"link": " ",
"icon": ""
},
{
"name": "State List",
"link": " ",
"icon": ""
},
{
"name": "Village Core Mapping",
"link": " ",
"icon": ""
},
{
"name": "Village List",
"link": " ",
"icon": ""
}
],
"name": "Address Setup",
"icon": ""
},
{
"subMenu": [
{
"name": "Branch Setup",
"link": " ",
"icon": ""
},
{
"name": "Company Setup",
"link": " ",
"icon": ""
}
],
"name": "Organisational Setup",
"icon": ""
}
],
"name": "Configurations",
"icon": ""
},
{
"name": "MIS",
"icon": "",
"link": " "
},
{
"subMenu": [
{
"name": "Account Management",
"icon": "",
"link": " "
},
{
"subMenu": [
{
"name": "Customers",
"link": " ",
"icon": ""
},
{
"name": "Prospect List",
"link": " ",
"icon": ""
},
{
"name": "Referral List",
"link": " ",
"icon": ""
},
{
"name": "Referred List",
"link": " ",
"icon": ""
}
],
"name": "Customer Management",
"icon": ""
},
{
"name": "Document Printings",
"icon": "",
"link": " "
},
{
"name": "Loan Management",
"icon": "",
"link": " "
}
],
"name": "Operational Masters",
"icon": ""
},
{
"name": "Processes",
"icon": "",
"link": " "
}
],
"status": "S"
}
Can someone help me to segregate above data? Any help would be appreciated. Thank you.
Solution
As stated by @Ravindra this can be done through recursion
<ul>
<li *ngFor="let menuItem of menuData"> {{ menuItem.name }}
<ng-container *ngIf="menuItem.subMenu">
<ng-container *ngTemplateOutlet="inner; context:menuItem"></ng-container>
</ng-container>
</li>
</ul>
<ng-template #inner let-subMenu="subMenu">
<ul>
<li *ngFor="let menuItem of subMenu">
{{ menuItem.name }}
<ng-container *ngIf="menuItem.subMenu">
<ng-container *ngTemplateOutlet="inner; context:menuItem"></ng-container>
</ng-container>
</li>
</ul>
</ng-template>