Displaying grouped arrays efficiently in Angular

Question

Displaying grouped arrays efficiently in Angular

I have received data from an API in the form of an array with objects structured like so:

[
  {"desc":"a", "menu": 1},{"desc":"b", "menu": 2},{"desc":"c", "menu": 1}, 
  {"desc":"d", "menu": 3},{"desc":"e", "menu": 3},{"desc":"f", "menu": 2}, 
  {"desc":"g", "menu": 1},{"desc":"g", "menu": 1},{"desc":"g", "menu": 4}, 
  {"desc":"g", "menu": 4},{"desc":"g", "menu": 4}
]

I want to display these objects using *ngFor, grouped by their "menu" property, and with a corresponding label for each group as follows:

Menu 1

{all objects with menu 1}

Menu 2

{all objects with menu 2}

Menu 3

{all objects with menu 3}

To achieve this, I plan to use *ngFor and set up logic to create labels for each menu group. Here is a rough outline of how I would approach it:

*ngFor="let object of objects; let currentMenu = 0"
     if currentMenu !== object.menu
           currentMenu === object.menu
       CREATE LABEL

If you have any suggestions on how to implement this effectively in actual code, please share them!

angular typescript

Answer 1

Answer №1

To improve the efficiency, I suggest grouping the data before utilizing the *ngFor directive. Here is a possible solution:


function groupBy(array, key) {
    return array.reduce((acc, current) => {
        (acc[current[key]] = acc[current[key]] || []).push(current);
        return acc; 
      }, {});
}

function toArray(obj) {
    return Object.keys(obj).map(key => obj[key]);
}

const data = [
  {"desc":"a", "menu": 1},{"desc":"b", "menu": 2},{"desc":"c", "menu": 1}, 
  {"desc":"d", "menu": 3},{"desc":"e", "menu": 3},{"desc":"f", "menu": 2}, 
  {"desc":"g", "menu": 1},{"desc":"g", "menu": 1},{"desc":"g", "menu": 4}, 
  {"desc":"g", "menu": 4},{"desc":"g", "menu": 4}
]

const groupedData = groupBy(data, "menu");

Then, in your template, you can utilize the grouped data like this:


<group *ngFor="let group of groupedData">
  <menu *ngFor="let item of group">
    <label>{{item.desc}}</label>
  </menu>
</group>

Answer 2

To improve the efficiency, I suggest grouping the data before utilizing the *ngFor directive. Here is a possible solution:


function groupBy(array, key) {
    return array.reduce((acc, current) => {
        (acc[current[key]] = acc[current[key]] || []).push(current);
        return acc; 
      }, {});
}

function toArray(obj) {
    return Object.keys(obj).map(key => obj[key]);
}

const data = [
  {"desc":"a", "menu": 1},{"desc":"b", "menu": 2},{"desc":"c", "menu": 1}, 
  {"desc":"d", "menu": 3},{"desc":"e", "menu": 3},{"desc":"f", "menu": 2}, 
  {"desc":"g", "menu": 1},{"desc":"g", "menu": 1},{"desc":"g", "menu": 4}, 
  {"desc":"g", "menu": 4},{"desc":"g", "menu": 4}
]

const groupedData = groupBy(data, "menu");

Then, in your template, you can utilize the grouped data like this:


<group *ngFor="let group of groupedData">
  <menu *ngFor="let item of group">
    <label>{{item.desc}}</label>
  </menu>
</group>

Answer 3

Answer №2

You can implement a solution like this:

ngOnInit(){
    var groups = new Set(this.array.map(item => item.menu))
    this.result = [];
    groups.forEach(g => 
      this.result.push({
        menu: g, 
        values: this.array.filter(i => i.menu === g)
      }
    ))
  }

This code snippet shows how to render the data in HTML:

<p>
    Start editing and see the magic happen :)
</p>
<div *ngFor="let item of result" border="1">
    <table>
        <tr>
            <th>Desc</th>
            <th>Menu</th>
        </tr>
        <ng-container>
            <tr>
                <td colspan="2">{{item.menu}}</td>
            </tr>
            <tr *ngFor="let value of item.values">
                <td>{{value.desc}}</td>
            </tr>
        </ng-container>
    </table>
    <div>

Feel free to check out the stackblitz I created. https://stackblitz.com/edit/angular-4ekz4n

Happy coding! :)

Answer 4

You can implement a solution like this:

ngOnInit(){
    var groups = new Set(this.array.map(item => item.menu))
    this.result = [];
    groups.forEach(g => 
      this.result.push({
        menu: g, 
        values: this.array.filter(i => i.menu === g)
      }
    ))
  }

This code snippet shows how to render the data in HTML:

<p>
    Start editing and see the magic happen :)
</p>
<div *ngFor="let item of result" border="1">
    <table>
        <tr>
            <th>Desc</th>
            <th>Menu</th>
        </tr>
        <ng-container>
            <tr>
                <td colspan="2">{{item.menu}}</td>
            </tr>
            <tr *ngFor="let value of item.values">
                <td>{{value.desc}}</td>
            </tr>
        </ng-container>
    </table>
    <div>

Feel free to check out the stackblitz I created. https://stackblitz.com/edit/angular-4ekz4n

Happy coding! :)

Answer 5

Answer №3

Learn how to write import statements within an Angular component

import { of } from 'rxjs';
import { groupBy, mergeMap } from 'rxjs/operators';

Next, add the following code snippet inside the ngOnInit() method:

ngOnInit():void{
on(
    {id: 1, name: 'JavaScript'},
    {id: 2, name: 'Parcel'},
    {id: 2, name: 'webpack'},
    {id: 1, name: 'TypeScript'},
    {id: 3, name: 'TSLint'}
).pipe(groupBy(a=>a.id)),
 mergeMap((group$) => group$.pipe(reduce((acc, cur) => [...acc, cur], []))),
)
.subscribe(p => console.log(p));

//The expected output will be as follows:

[ { id: 1, name: 'JavaScript'},
{ id: 1, name: 'TypeScript'} ]
[ { id: 2, name: 'Parcel'},
  { id: 2, name: 'webpack'} ]
[ { id: 3, name: 'TSLint'} ]

For further details, visit rxJS operators for groupBy

Answer 6

Learn how to write import statements within an Angular component

import { of } from 'rxjs';
import { groupBy, mergeMap } from 'rxjs/operators';

Next, add the following code snippet inside the ngOnInit() method:

ngOnInit():void{
on(
    {id: 1, name: 'JavaScript'},
    {id: 2, name: 'Parcel'},
    {id: 2, name: 'webpack'},
    {id: 1, name: 'TypeScript'},
    {id: 3, name: 'TSLint'}
).pipe(groupBy(a=>a.id)),
 mergeMap((group$) => group$.pipe(reduce((acc, cur) => [...acc, cur], []))),
)
.subscribe(p => console.log(p));

//The expected output will be as follows:

[ { id: 1, name: 'JavaScript'},
{ id: 1, name: 'TypeScript'} ]
[ { id: 2, name: 'Parcel'},
  { id: 2, name: 'webpack'} ]
[ { id: 3, name: 'TSLint'} ]

For further details, visit rxJS operators for groupBy

Answer 7

Answer №4

The first step is to restructure the current array to match the format below:

[
  {
    category: 1,
    items: ["a", "b"]
  },
  {
    category: 2,
    items: ["a1", "b1", "c1", "d1"]
  }
]

You can achieve this by iterating through the current array in the component's TypeScript file and organizing it as demonstrated in the example above.

Once you have updated the array, you can use it with *ngFor in the HTML to display the data.

Answer 8

The first step is to restructure the current array to match the format below:

[
  {
    category: 1,
    items: ["a", "b"]
  },
  {
    category: 2,
    items: ["a1", "b1", "c1", "d1"]
  }
]

You can achieve this by iterating through the current array in the component's TypeScript file and organizing it as demonstrated in the example above.

Once you have updated the array, you can use it with *ngFor in the HTML to display the data.

Displaying grouped arrays efficiently in Angular

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to navigate back to the previous page while retaining parameters?

The server's response is unpredictable, causing Json.Parse to fail intermittently

I am looking to access a public method from a different component in Angular 2

Implementing Dynamic Component Rendering in React Native with Typescript

Find the combined key names in an object where the values can be accessed by index

Ways to showcase product information (Using Angular and Firebase)

Discover the syntax for reading route parameters in Angular

Managing input and output using a collaborative service

Exploring the power of Vue CLI service in conjunction with TypeScript

Testing a function that utilizes Nitro's useStorage functionality involves creating mock data to simulate the storage behavior

Incorporating TypeScript's internal references

Webpack 5: Updating the file path for TypeScript declaration files

Exploring the way to reach a specific page in Ionic3

Angular: The type AbstractControl<any> cannot be assigned to type FormControl

Displaying a component inside a different component

Improving event observation efficiency with Observable.fromEvent on the browser window

Assign object properties to a constant variable while validating the values

What is the best way to reset a setInterval ID in Angular?

Using Typescript for-loop to extract information from a JSON array

Errors in the Latest Release of Angular2 and Visual Studio 2015