CODEWITHSUNDEEP
angulartypescript
jeein
jeein

Reputation: 19

Display array in angular

I have a list that has three columns; menu, menuItem, and order.

I want to display menu and menuItem by order like this example:

Menu 1 : order 200
Menu 2 : order 230
Menu 3 : order 250 
Menu item 1 : order 210
Menu item 2 : order 360

The result will be :

I do that in two lists (one for the menu and one for the item menu ) and when the value for item is between the menu index 1 and last menu index 2, I save it in a new list to display. But I have a problem with the new list: I can't have the value for every menu.

Can anyone could help me?

For(I=0; I< list1.length ;I++){
 let nextMenu = list1.order[I+1];
 for (j=0;j<list2.length ;j++){
  let item = list2[j].order;
  let menu = list1[I].order;
 if(menu < item < Next menu){
 This.list3.push(list2[j]);
  }
}
}
```![enter image description here](https://i.sstatic.net/1TjDE.jpg)

Upvotes: 0

Views: 491

Answers (1)

Juan Vicente Berzosa Tejero
Juan Vicente Berzosa Tejero

Reputation: 3022

You simply have to treat the last item separately.

For instance, try in this way (you can refactor code in a better way, is just an example):

(I leave you HERE a stackblitz with the code working in order you to test it)

...
// adding attibute class for the lists
  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>

EDIT: As you say that don't know well how to treat the result in you HTML, I edit my answer adding the HTML code (and adding attributes list for the HTML), whit your desired result, as you can see in this image:

enter image description here

I update the STACKBLITZ as well.

Upvotes: 2

Related Questions