Display array in angular

Question

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 :

Menu 1 have menu item 1 ( 200< 210 <230)
Menu 2 : don't have menu item
Menu 3 have menu item 2 ( because 250 < 360).

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)

Juan Vicente Berzosa Tejero · Accepted Answer · 2022-01-08 10:25:15Z

2

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:

I update the STACKBLITZ as well.

edited Jan 8, 2022 at 10:25

answered Jan 7, 2022 at 21:35

Juan Vicente Berzosa Tejero

3,0422 gold badges8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jeein Over a year ago

Yes i get the list3 by order but I have a problem to display it properly like : menu 1 ( item for menu 1) in HTML <ul> menu1 <li> item1 </li></ul> I have always all the list 3 in <li>, this is my code in HTML : <div *ng for="let menu of list1">{{menu}} <div *ng for="let item of list3">{{item}} </div></div>

Juan Vicente Berzosa Tejero Over a year ago

Ok, As I see you need help in treat the result in your HTML, I have update my previous answer., now with the HTML you need in order to get what you wanted. Check it now and if you have any problem, see it working in the updated stackblitz that I have provided as well. Please, comment that all was OK, bye!

jeein Over a year ago

I would like display result like this picture : i.sstatic.net/1TjDE.jpg

Juan Vicente Berzosa Tejero Over a year ago

But your initial question was about get all the results with your new list (" I have a problem with the new list: I can't have the value for every menu."). How to display it in the way you show now with your new imagen in the comment is possible, but it would be another question... so it's better you write down another one, and add the new code and the new imagen for the desired output.

Collectives™ on Stack Overflow

Display array in angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related