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

Opting In to Share Telemetry Data in Angular 8

Ensuring Uniform Data Types Across Objects (Using Typescript)

Linking events together to fetch interconnected information

Is the ng-selector in Angular2 not sorting items alphabetically as expected?

Typescript - Defining string value interfaces

Tips on fixing the "TypeError: Cannot read properties of undefined (reading 'lookup')" error message that occurs when running npm install

Navigating to a Child Module within a Parent Module in Angular 2 Release Candidate 5

Using [(ngModel)] on a field within an object that is nested inside another object

Custom component not rendering expected CSS style

The "initialized" event in angular2-tree-component fires prior to the data being loaded

Guide on setting up multiple Axios instances in NestJS

Is it not possible to utilize inline "if" statements in conjunction with useEffect within a functional React component?

Unable to retrieve component name using React.Children

Listening for Angular 2 router events

React: Using useState and useEffect to dynamically gather a real-time collection of 10 items

Unable to assign to 'disabled' as it is not recognized as a valid attribute for 'app-button'

The Heart of the Publisher-Subscriber Design Paradigm

Creating formGroups dynamically for each object in an array and then updating the values with the object data

What are the steps to resolve the error message "Make sure the component is enclosed within a <Provider>" while using Next 14 with Redux Toolkit?

Hover Effect for 3D Images