Here is a sample data set retrieved from the server:
[
{
subMenuId: 1,
submenu: 'Users',
menu: 'Administration',
url: '/pms/admin/usrs-dsh',
icon: 'fas fa-cogs',
},
{
subMenuId: 2,
submenu: 'Roles',
menu: 'Administration',
url: '/pms/admin/roles-dsh',
icon: 'fas fa-cogs',
},
{
subMenuId: 3,
submenu: 'Menu Items',
menu: 'Administration',
url: '/pms/admin/menus-dsh',
icon: 'fas fa-cogs',
},
{
subMenuId: 4,
submenu: 'Banks',
menu: 'Administration',
url: '/pms/admin/banks-dsh',
icon: 'fas fa-cogs',
},
{
subMenuId: 5,
submenu: 'Branches',
menu: 'Administration',
url: '/pms/admin/branches-dsh',
icon: 'fas fa-cogs',
},
{
subMenuId: 6,
submenu: 'Dashboard',
menu: 'PD3',
url: '/pms/pd3/dsh',
icon: 'fas fa-cogs',
},
];
My challenge now is to display this data as depicted in the Expected Output image. However, in the current display, main level values are repeating for each sub-level value. Expected Output: https://i.sstatic.net/NadHY.png
My Output: https://i.sstatic.net/pIMcs.png
Here is the HTML file:
<tr *ngFor="let m of userPermissions;">
<td>
<label class="ml-3 form-check-label">{{m.menu}}</label>
</td>
<td>
<div>
<input (change)="changeSubMenus($event, m.menu,m.subMenuId)" type="checkbox" class="ml-0 form-check-input">
<label class="ml-3 form-check-label">{{m.submenu}}</label><br>
</div>
</td>
</tr>
And here is the TS file:
getMenus(){
this.userPermissions = this.adminService.allMenus;
this.userPermissions.forEach((val) =>{
// console.log(val)
// TODO: remove multiple main level values and display sub level values with one main level value
})
Do you have any suggestions on how to achieve this successfully? Thanks