Show array elements in Angular framework

Question

Show array elements in Angular framework

I need help with displaying a list that contains three columns: menu, menuItem, and order.

The desired display format is to show menu and menuItem ordered by order as follows:

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

This would result in:

Menu 1 has menu item 1 (200 < 210 < 230)
Menu 2 : does not have a menu item
Menu 3 has menu item 2 (because 250 < 360).

I attempted this by using two lists, one for the menu and another for the menu items. I then tried to save the items falling between the indexes of two menus in a new list for display. However, I am facing an issue with accurately displaying the values for every menu.

Could anyone provide assistance on this matter?

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]);
  }
}
}

angular typescript

Answer 1

Answer №1

To handle the last item differently, follow this approach:

For example, consider refactoring the code as shown below:

(Here is a link to a StackBlitz with the code for testing)

...
// adding attribute 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>

UPDATE: Since you mentioned uncertainty about displaying the result in your HTML, I have included the HTML code (with additional attributes for clarity), showcasing the desired outcome, visible in this image:

https://i.sstatic.net/nQ99g.png

I have also updated the StackBlitz.

Answer 2

To handle the last item differently, follow this approach:

For example, consider refactoring the code as shown below:

(Here is a link to a StackBlitz with the code for testing)

...
// adding attribute 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>

UPDATE: Since you mentioned uncertainty about displaying the result in your HTML, I have included the HTML code (with additional attributes for clarity), showcasing the desired outcome, visible in this image:

https://i.sstatic.net/nQ99g.png

I have also updated the StackBlitz.

Show array elements in Angular framework

Answer №1

Similar questions

I am interested in utilizing Template literal types to symbolize placeholders

The error occurred in Commands.ts for Cypress, stating that the argument '"login"' cannot be assigned to the parameter of type 'keyof Chainable<any>))`

Steps to prevent subfolder imports in my npm package

Troubleshooting Authorization Header Issue in Angular 5

Suggested imports in a yarn monorepo are not being automatically added when selected

What steps should I take to resolve the issue of 'unable to locate the name 'OktaAuthService' error?

Observable subscription not updating HTML with changes

Using Angular 2 for form validation

How to Implement checked radio buttons in Angular 2 using ngModel

Customizing the Position of Material UI Select in a Theme Override

Is there a way to verify if the object's ID within an array matches?

Encountering a DOMException while attempting to update the value of a textarea

When the request's credentials mode is set to 'include', the 'Access-Control-Allow-Origin' header value in the response should not be the wildcard character '*'

Tab-based Ionic 2 advertising campaign featuring banners

lines stay unbroken in angular

What is the solution to resolving a Typescript error within an imported library?

A property in TypeScript with a type that depends on the value of an object

Issue with the integration of Angular and Java Jersey API arises when attempting to encode utf-8 whitespaces at the end, resulting in invalid JSON

Tips for converting necessary constructor choices into discretionary ones after they have been designated by the MyClass.defaults(options) method

Error: The function call does not match any of the overloads. 'VueRouter' is not recognized