Search code examples
jsontypescriptmenumegamenu

Create full menu based on Json file

I have a fully functional menu (static), as im going to post, i want to replicate it based on what i get from a json file, i mean, create menu based on json file.

heres what i want as a menu: html:

<div class="menu-container" >
    <div class="menu">
        <nav  class="navbar-toggleable-md">
            <div id="toggle" class="navbar-toggler"><a></a>
            </div>
        </nav>

        <ul id="my_styles" class="rowcenter" >

            <li>
                <a role="button" class="button button4 menu-button" ><i role="button" class="icon-ambientais fs1 icon menu-button"></i><span class="button-text rowcenter menu-button">menu1</span></a>
                <ul class="menu-list">
                    <li>
                        <a href="#" style="color: #f38e31"><i style="color: white" class="icon-ambientais fs1"></i>submenu</a>
                        <ul>
                            <li><a href="javascript:void(0)" [routerLink]="['/doc/link']" [routerLinkActive]="['router-link-active']">{{ 'submenu</a></li>
                            <li><a href="javascript:void(0)" [routerLink]="['/doc/link2']" [routerLinkActive]="['router-link-active']">submenu</a></li>
                            <li><a href="javascript:void(0)" [routerLink]="['/documentos/AbreviaturaQld']" [routerLinkActive]="['router-link-active']">{{ 'Imagens' | translate }}</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="#" style="color: #f38e31"><i style="color: white" class="icon-gestao-ambient fs1"></i>submenu3</a>
                        <ul>
                            <li><a href="javascript:void(0)" [routerLink]="['/doc2/link2']" [routerLinkActive]="['router-link-active']">submenu2</a></li>
                            <li><a href="javascript:void(0)" [routerLink]="['/doc2/link2']" [routerLinkActive]="['router-link-active']">submenu2</a></li>
                            <li><a href="javascript:void(0)" [routerLink]="['/doc2/link2']" [routerLinkActive]="['router-link-active']">submenu2</a></li>
                        </ul>
                    </li>
                </ul>
            </li>

        </ul>
    </div>
</div>

i have javascript to make it work. I was searching for some help, because i cant figute it out..

i found that example, but i can't make it look like what i need. https://www.codeproject.com/Articles/311758/Building-Menu-from-JSON (passing the json obj to json file)

but i can't make it work like the menu i have.. if i change, for example, <ul> to <ul class="bla"> on this one, it breaks. then i found that: Creating a Menu from JSON but no success..

heres my trying code: on html i just call

my typescript file: .ts

 ngOnInit() {
this._menu.getMenu()
          .subscribe( res => {
               let data = res;

               console.log(data);
              var getMenuItem = function (itemData) {
                  var item = $("<li>")
                      .append(
                          $("<a>", {
                              href: itemData.link,
                              html: itemData.name
                          }));
                  if (itemData.sub) {
                      var subList = $("<ul>");
                      $.each(itemData.sub, function () {
                          subList.append(getMenuItem(this));
                      });
                      item.append(subList);
                  }
                  return item;
              };

              var $menu = $("#menu");
              $.each(data.menu, function () {
                  $menu.append(
                      getMenuItem(this)
                  );
              });
              $menu.menu();
          });
}

had somebody done something like this before?

if someofyou have a working example with one menu item and submenu, even without img, i would appreciate it.

thank you.

Solution

  • Ok i got the solution! Having al lthe css and html done, i've just got the JSON file to array that way:

    this._menu.getMenu()
          .subscribe( res => {
              let data = res;

              console.log(data);
              this.arr = data;
              this.arr = (<any>Object).values(data);
          });

    Then, on html i just picked the menus and sub menus names / links / icons, and ngfor them into the already made tags:

    <li *ngFor="let item of arr[0]; let i = index;">
                <a role="button" class="button button4 menu-button" ><i role="button" class={{item.class}}></i><span class="button-text rowcenter menu-button">{{item.name}}</span></a>
                <ul class="menu-list" *ngIf=item.sub>
                    <li *ngFor="let sub of item.sub; let j = index;">
                        <a href="#" style="color: #f38e31"><i style="color: white" class={{item.sub[j].class}}></i>{{item.sub[j].name}}</a>
                        <ul *ngFor="let smn of sub.submenu; let x = index;">
                            <li><a href="javascript:void(0)" [routerLink]="[smn.routerlink]"  [routerLinkActive]="['router-link-active']">{{smn.name}}</a></li>
                        </ul>
                    </li>
                </ul>
            </li>

    heres the JSON i've used:

    {
    "menu": [
        {
            "name": "Menu Name",
            "link": "link",
      "class": "icon-ambientais fs1 icon menu-button",
      "sub": [{
          "name": "SubMenuTitle1",
          "link": "link",
          "class": "icon-ambientais fs1",
          "submenu":[{
            "name": "SubMenu1",
            "routerlink": "/link/Qld"
          },{
            "name": "SubMenu2",
            "routerlink": "/link/eQld"
          },{
            "name": "SubMenu3",
            "routerlink": "/link/aQld"
          }
        ]
        },
        {
          "name": "SubMenuTitle2",
          "link": "link",
          "class": "icon-gestao-ambient fs1",
          "submenu":[{
            "name": "SubMenu1",
            "routerlink": "/link2/oQld"
          },{
            "name": "SubMenu2",
            "routerlink": "/doc/eQld"
          }
        ]
        }
      ]
    }
}

    Hope that helps somebody on the futurue