Создать полное меню на основе файла Json - PullRequest
Новая
       28

Создать полное меню на основе файла Json

0 голосов
/ 25 мая 2018

У меня есть полностью функциональное меню (статическое), так как я собираюсь опубликовать, я хочу скопировать его на основе того, что я получаю из файла 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"> на этом,это ломает.Затем я обнаружил, что: Создание меню из 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, я был бы признателен.

спасибо.

1 Ответ

0 голосов
/ 29 мая 2018

Хорошо, я получил решение!После того, как все css и html сделаны, я только что получил файл JSON для массива таким образом: 

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

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

Затем, на html, я просто выбрал названия меню и подменю / links / icons, и ngforих в уже сделанные теги: 

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

Надеюсь, что кто-то поможет в будущем

...