根据 Json 文件创建完整菜单

Question

我有一个功能齐全的菜单（静态），因为我要去 post，我想根据我从 json 文件中得到的内容复制它，我的意思是，创建基于菜单在 json 文件上。

这是我想要的菜单： 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>

我有 javascript 让它工作。我正在寻找一些帮助，因为我无法弄明白..

我找到了那个例子，但我不能让它看起来像我需要的。 https://www.codeproject.com/Articles/311758/Building-Menu-from-JSON （将 json obj 传递给 json 文件）

但我不能让它像我的菜单一样工作.. 如果我改变，例如，<ul> to <ul class="bla"> 在这个菜单上，它会中断。然后我发现：Creating a Menu from JSON 但没有成功..

这是我的尝试代码：在 html 我只是打电话给

我的打字稿文件： .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();
          });
}

以前有人做过这样的事吗？

如果你们中有人有一个包含一个菜单项和子菜单的工作示例，即使没有 img，我将不胜感激。

谢谢。

Answer 1

好的，我找到了解决方案！完成所有 css 和 html 后，我刚刚得到 JSON 文件以这种方式排列：

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

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

然后，在 html 我刚刚选择了菜单和子菜单名称/链接/图标，并将它们添加到已经制作的标签中：

<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>

这是我用过的JSON：

{
    "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"
          }
        ]
        }
      ]
    }
}

希望对未来的人有所帮助

根据 Json 文件创建完整菜单

Create full menu based on Json file

json

menu

megamenu

typescript