Ionic 3 create accordion side menu items from dynamic JSON (clickable pages)

RubyRavenford · October 26, 2018, 1:21am

If someone found and have experienced to this question, please reply soon because I’m urge need your response. Thank you.

Hi, I have an example JSON code like this :

this.pages = [
  { ru : 'RU II', areas : [
      { area : 'LSWR', units : [
        { unit : 'PRODUCTION' },
        { unit : 'UTILITIES' },
        { unit : 'AHU' }
      ]},
      { area : 'UTILITIES', units :[
        { unit : 'PRODUCTION' },
        { unit : 'UTILITIES' },
        { unit : 'AHU' }
      ]},
      { area : 'HCC', units :[
        { unit : 'PRODUCTION' },
        { unit : 'UTILITIES' },
        { unit : 'AHU' }
      ]},
      { area : 'PRODUKSI', units :[
        { unit : 'PRODUCTION' },
        { unit : 'UTILITIES' },
        { unit : 'AHU' }
      ]},
      { area : 'RCC', units :[
        { unit : 'PRODUCTION' },
        { unit : 'UTILITIES' },
        { unit : 'AHU' }
      ]},
      { area : 'DHC', units :[
        { unit : 'PRODUCTION' },
        { unit : 'UTILITIES' },
        { unit : 'AHU' }
      ]},
    ]
  },
  { ru : 'RU III', areas : [
      { area : 'LSWR', units : [
        { unit : 'PRODUCTION' },
        { unit : 'UTILITIES' },
        { unit : 'AHU' }
      ]},
      { area : 'UTILITIES', units :[
        { unit : 'PRODUCTION' },
        { unit : 'UTILITIES' },
        { unit : 'AHU' }
      ]},
      { area : 'HCC', units :[
        { unit : 'PRODUCTION' },
        { unit : 'UTILITIES' },
        { unit : 'AHU' }
      ]},
      { area : 'PRODUKSI', units :[
        { unit : 'PRODUCTION' },
        { unit : 'UTILITIES' },
        { unit : 'AHU' }
      ]},
      { area : 'RCC', units :[
        { unit : 'PRODUCTION' },
        { unit : 'UTILITIES' },
        { unit : 'AHU' }
      ]},
      { area : 'DHC', units :[
        { unit : 'PRODUCTION' },
        { unit : 'UTILITIES' },
        { unit : 'AHU' }
      ]},
    ]
  }],

Recently I’ve trying to create accordion side menu using these JSON code but still static and it works, each categories in JSON code is clickable to each pages that I’m linked for.

This is my working typescript code for static accordion side menu :

  gatherMainContent(statepath) {
    console.log(statepath);
    console.log(statepath.areas.length);
    if (statepath.areas.length == 0) {
      this.MenuCtrl.close();
      let p = JSON.stringify(statepath);
      sessionStorage.setItem('page',p);
      this.nav.setRoot(ListPage);
    }
  }
  gatherSubContent(statepath) {
    console.log(statepath);
    console.log(statepath.units.length);
    if (statepath.units.length == 0) {
      this.MenuCtrl.close();
      let p = JSON.stringify(statepath);
      sessionStorage.setItem('page',p);
      this.nav.setRoot(ListPage);
    }
  }
  gatherSub2Content(statepath) {
    console.log(statepath);
    this.MenuCtrl.close();
    let p = JSON.stringify(statepath);
    sessionStorage.setItem('page',p);
    // this.nav.setRoot(UnitPage);
    const modal = this.modalCtrl.create(EquipmentPage);
    modal.present();
  }

  isGroupShown(group) {
    return this.shownGroup === group;
  };

  isGroupShown2(group2) {
    return this.shownGroup2 === group2;
  };

  toggleGroup = function (group) {
    if (this.isGroupShown(group)) {
      this.shownGroup = null;
      if (sessionStorage.getItem('group2')) {
        this.toggleGroup2(sessionStorage.getItem('group2'));
      }
    } else {
      this.shownGroup = group;
    }
  }

  toggleGroup2(group2) {
    if (this.isGroupShown2(group2)) {
      this.shownGroup2 = null;
      sessionStorage.setItem('group2', null);
    } else {
      sessionStorage.setItem('group2', group2);
      this.shownGroup2 = group2;
    }
  };

And here is the template code :

<div *ngFor="let area of p.areas; let j=index">
  <ion-item class="menu-wrap" (tap)="tapArea(area)" *ngIf="isGroupShown(p)">
    <ion-icon [name]="isGroupShown2(area) ? 'ios-arrow-down' : 'ios-arrow-forward'"></ion-icon>
    <font style="color : black; margin-left: 25px;">&nbsp; {{ area.area }}</font>
  </ion-item>

<div *ngFor="let unit of area.units; let t=index">
  <ion-item class="menu-wrap" (click)="gatherSub2Content(unit)" *ngIf="isGroupShown2(area)">
  <font style="color : black; margin-left: 60px;">{{ unit.unit }}</font>
  </ion-item>
</div>

Now, I’m tring to bind dynamic JSON code from server to side menu navigation and each items is clickable. I don’t find the solution anywhere maybe someone knows. Please help me, I could be thank you before.