CODEWITHSUNDEEP
angulartypescript
jeein
jeein

Reputation: 19

Menu item for every menu

I have a list that has three columns (menu, item menu, and order ) and I want to display the menu item for every menu by order, but I have a problem with the new list, I can't have the menu item for every menu, How to display it like in the picture:

  list1 = [];
  list2 = [];
  list3 = [];

const list1 = [
      { menu: 1, order: 200 },
      { menu: 2, order: 230 },
      { menu: 3, order: 250 },
    ];

    const list2 = [
      { item: 1, order: 210 },
      { item: 2, order: 360 },
    ];

    let list3 = [];

    for (let i = 0; i < list1.length; i++) {
      const next = i + 1;

      if (next <= list1.length - 1) {

        let nextMenu = list1[next].order;

        for (let j = 0; j < list2.length; j++) {

          let item = list2[j].order;
          let menu = list1[i].order;

          if (menu < item && item < nextMenu) {
            list3.push(list2[j]);
          }
        }
      } else {

        for (let j = 0; j < list2.length; j++) {

          let item = list2[j].order;
          let menu = list1[i].order;

          if (menu < item) {
            list3.push(list2[j]);
          }
        }

      }
    }

    this.list1 = list1;
    this.list2 = list2;
    this.list3 = list3;
  }

HTML:

<ul>
  <li *ngFor="let menu of list1">
    {{ 'Menu ' + menu.menu + ' : order  ' + menu.order }}
  </li>
  <li *ngFor="let item of list3">
    {{ 'Menu item ' + item.item + ' : order  ' + item.order }}
  </li>
</ul>

MY CURRENT VIEW:

enter image description here

DESIRED VIEW: enter image description here

Upvotes: 0

Views: 675

Answers (1)

Mahdi Zarei
Mahdi Zarei

Reputation: 7406

You have order so you just need to join these arrays and sort them and then show them on basis of being item or menu:

export class AppComponent {
  finalList = [];

  constructor() {
    const list1 = [
      { menu: 1, order: 200 },
      { menu: 2, order: 230 },
      { menu: 3, order: 250 },
    ];

    const list2 = [
      { item: 1, order: 210 },
      { item: 2, order: 360 },
    ];

    let list3 = [];

    [...list1, ...list2, ...list3].sort((a, b) => a.order - b.order).forEach((item) => {
      if (item.menu) {
        this.finalList.push({
          menu: item.menu,
          order: item.order,
          items: []
        });
      }
      if (item.item) {
        this.finalList[this.finalList.length - 1]?.items?.push({
          order: item.order,
          item: item.item
        });
      }
    });
  }
}

Template:

<ng-container *ngFor="let menu of finalList">
  <span>
    {{ 'Menu ' + menu.menu + ' : order  ' + menu.order }}
    <br>
  </span>
  <ng-container *ngIf="menu.items.length">
    <ul>
      <li *ngFor="let item of menu.items">
        {{ 'Menu item ' + item.item + ' : order  ' + item.order }}
      </li>
    </ul>
  </ng-container>
</ng-container>

I provided a stackblitz for you too.

Upvotes: 1

Related Questions