Dynamic Menu with Sub menu in angular 2

Question

I have some JSON in the below format. I need to convert it into a menu with a sub menu when sub-menu_location is not equal to null, as below

 { "data": [ { "menu_name": "Primary Operations", "enabled": true, "sub-menu_location": null }, { "menu_name": "Curated Games", "enabled": false, "sub-menu_location": null }, { "menu_name": "Cricket", "enabled": false, "sub-menu_location": "outdoor" }, { "menu_name": "football", "enabled": false, "sub-menu_location": "outdoor" }, { "menu_name": "Hockey", "enabled": false, "sub-menu_location": "outdoor" } ] } 

Answer 1

A couple of things to note:

• The example data you give in the question would only allow for a single sub-menu item.
• I do not know how you want to display this but from the picture I am guessing Bootstrap.
• I don't think Bootstrap supports dropdown sub-items by default so I am going to use the syntax in this codepen example

Potential solution

If you store the data object as a property in your component, the following template should give you something to start with:

<li>
  <a class="dropdown-toggle" data-toggle="dropdown">Menu<b class="caret"></b></a>
  <ul class="dropdown-menu multi-level">
    <li *ngFor="let menuItem of data" class="dropdown-submenu">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{menuItem.menu_name}}</a>
      <ul *ngIf="menuItem.sub-menu_location" class="dropdown-menu">
        <li><a href="#">{{menuItem.sub-menu_location}}</a></li>
      </ul>
    </li>
  </ul>
</li>