Utilizing *ngfor in Angular 7 to Group and Display Data

Question

Utilizing *ngfor in Angular 7 to Group and Display Data

I currently have incoming data structured like this in my Angular application

https://i.stack.imgur.com/jgEIw.png

What is the best way to group and sort the data by State and County, and present it in a table as shown below?

https://i.stack.imgur.com/azRyC.png

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  data = [
    { state: 'MN', county: '1', item: 0.297 },
    { state: 'MN', county: '1', item: 0.04 },
      { state: 'CA', county: '2', item: 0.019 },
    { state: 'MN', county: '1', item: 0.0374 }, 
    { state: 'CA', county: '2', item: 0.037 }
]
}

 <table >
        <tr>
          <th>State</th>
          <th>County</th>
          <th>Item</th>
        </tr>
        <ng-container *ngFor="let dataitem of data">
        <tr>
          <td>{{dataitem.state}}</td>
          <td>{{dataitem.county}}</td>
          <td>{{dataitem.item}}</td>
        </tr>
        </ng-container>
    </table>

javascript angular typescript

Answer 1

Answer №1

If your data is already ordered, you can utilize the 'let i = index' method to compare if the previous data item is the same using a conditional operator.

<ng-container *ngFor="let dataitem of data; let i=index">
<tr>
  <td>{{i > 0 && data[i-1].state == dataitem.state ? '' : dataitem.state}}</td>
  <td>{{i > 0 && data[i-1].county == dataitem.county ? '' : dataitem.county}}</td>
  <td>{{dataitem.item}}</td>
</tr>
</ng-container>

Answer 2

If your data is already ordered, you can utilize the 'let i = index' method to compare if the previous data item is the same using a conditional operator.

<ng-container *ngFor="let dataitem of data; let i=index">
<tr>
  <td>{{i > 0 && data[i-1].state == dataitem.state ? '' : dataitem.state}}</td>
  <td>{{i > 0 && data[i-1].county == dataitem.county ? '' : dataitem.county}}</td>
  <td>{{dataitem.item}}</td>
</tr>
</ng-container>

Answer 3

Answer №2

Utilize the power of lodash to organize your data into separate arrays.

Learn more about lodash's groupBy method here!

import { groupBy } from 'lodash-es'
const countries = groupBy(data, 'country')

You can display multiple tbody elements in your table

<tbody *ngFor="let country of countries">...</tbody>

Answer 4

Utilize the power of lodash to organize your data into separate arrays.

Learn more about lodash's groupBy method here!

import { groupBy } from 'lodash-es'
const countries = groupBy(data, 'country')

You can display multiple tbody elements in your table

<tbody *ngFor="let country of countries">...</tbody>

Answer 5

Answer №3

By following the instructions in this helpful answer, you can preprocess your data or use a pipe to generate nested objects.

Here is an example inspired by the linked solution:

key = 'state';
data = data.reduce((data, x) => {
    (data[x[key]] = data[x[key]] || []).push(x);
    return data;
  }, {});

The above code snippet should result in something like this:

data = [
    { 'MN': [
        { county: '1', item: 0.297 }
        ....
    ]}
]

Alternatively, if your list is sorted, you can employ clever *ngIf and index logic. Check out more details here. Here's an example of how to do it:

<div *ngFor="let item of list; let i = index;">
  <div *ngIf="i > 0 && item.state !== list[i-1].state">{{item.state}}</div>
</div>

Answer 6

By following the instructions in this helpful answer, you can preprocess your data or use a pipe to generate nested objects.

Here is an example inspired by the linked solution:

key = 'state';
data = data.reduce((data, x) => {
    (data[x[key]] = data[x[key]] || []).push(x);
    return data;
  }, {});

The above code snippet should result in something like this:

data = [
    { 'MN': [
        { county: '1', item: 0.297 }
        ....
    ]}
]

Alternatively, if your list is sorted, you can employ clever *ngIf and index logic. Check out more details here. Here's an example of how to do it:

<div *ngFor="let item of list; let i = index;">
  <div *ngIf="i > 0 && item.state !== list[i-1].state">{{item.state}}</div>
</div>

Answer 7

Answer №4

Check out this fully functional solution along with a Stackblitz Demo demonstrating cell merging capabilities.

To achieve the desired effect, you need to calculate a row span for each item and assign it to the rowspan attribute of the respective td. Additionally, conditionally render the td to only display it for the first occurrence of each state.

An effective strategy involves preprocessing an array sorted by state and county, incorporating added span properties for both states and counties.

Determining these span properties involves tallying the child count for each state and county within that state by filtering the original data array.

The objective is to structure the array as follows:

[
  {state: "CA", county: "2", item: 0.019, stateSpan: 3, countySpan: 2},
  {state: "CA", county: "2", item: 0.037, stateSpan: 0, countySpan: 0},
  {state: "CA", county: "3", item: 0.14, stateSpan: 0, countySpan: 1},
  {state: "MN", county: "1", item: 0.297, stateSpan: 4, countySpan: 3},
  {state: "MN", county: "1", item: 0.04, stateSpan: 0, countySpan: 0},
  {state: "MN", county: "1", item: 0.0374, stateSpan: 0, countySpan: 0},
  {state: "MN", county: "3", item: 0.14, stateSpan: 0, countySpan: 1}
]

Referencing the code snippet below:

 <table>
    <tr>
      <th>State</th>
      <th>County</th>
      <th>Item</th>
    </tr>
    <tr *ngFor="let item of dataExt">
      <td [attr.rowspan]="item.stateSpan" *ngIf="item.stateSpan">{{ item.state }}</td>
      <td [attr.rowspan]="item.countySpan" *ngIf="item.countySpan">{{ item.county }}</td>
      <td>{{ item.item }}</td>
    </tr>
</table>

export class AppComponent  {
  data = [
    { state: 'MN', county: '1', item: 0.297 },
    { state: 'MN', county: '1', item: 0.04 },
    { state: 'MN', county: '3', item: 0.14 },
    { state: 'CA', county: '2', item: 0.019 },
    { state: 'MN', county: '1', item: 0.0374 }, 
    { state: 'CA', county: '2', item: 0.037 },
    { state: 'CA', county: '3', item: 0.14 }
  ];

  dataExt: any[] = [];

  constructor() {
    this.processData();
  }

  private processData() {
    const statesSeen = {};
    const countiesSeen = {};

    this.dataExt = this.data.sort((a, b) => {
      const stateComp = a.state.localeCompare(b.state);
      return stateComp ? stateComp : a.county.localeCompare(b.county);
    }).map(x => {
      const stateSpan = statesSeen[x.state] ? 0 :
        this.data.filter(y => y.state === x.state).length;

      statesSeen[x.state] = true;

      const countySpan = countiesSeen[x.state] && countiesSeen[x.state][x.county] ? 0 :
        this.data.filter(y => y.state === x.state && y.county === x.county).length;

      countiesSeen[x.state] = countiesSeen[x.state] || {};
      countiesSeen[x.state][x.county] = true;

      return { ...x, stateSpan, countySpan };
    });
  }
}

The resulting table can be viewed here:

https://i.stack.imgur.com/oq3va.png

Answer 8

Check out this fully functional solution along with a Stackblitz Demo demonstrating cell merging capabilities.

To achieve the desired effect, you need to calculate a row span for each item and assign it to the rowspan attribute of the respective td. Additionally, conditionally render the td to only display it for the first occurrence of each state.

An effective strategy involves preprocessing an array sorted by state and county, incorporating added span properties for both states and counties.

Determining these span properties involves tallying the child count for each state and county within that state by filtering the original data array.

The objective is to structure the array as follows:

[
  {state: "CA", county: "2", item: 0.019, stateSpan: 3, countySpan: 2},
  {state: "CA", county: "2", item: 0.037, stateSpan: 0, countySpan: 0},
  {state: "CA", county: "3", item: 0.14, stateSpan: 0, countySpan: 1},
  {state: "MN", county: "1", item: 0.297, stateSpan: 4, countySpan: 3},
  {state: "MN", county: "1", item: 0.04, stateSpan: 0, countySpan: 0},
  {state: "MN", county: "1", item: 0.0374, stateSpan: 0, countySpan: 0},
  {state: "MN", county: "3", item: 0.14, stateSpan: 0, countySpan: 1}
]

Referencing the code snippet below:

 <table>
    <tr>
      <th>State</th>
      <th>County</th>
      <th>Item</th>
    </tr>
    <tr *ngFor="let item of dataExt">
      <td [attr.rowspan]="item.stateSpan" *ngIf="item.stateSpan">{{ item.state }}</td>
      <td [attr.rowspan]="item.countySpan" *ngIf="item.countySpan">{{ item.county }}</td>
      <td>{{ item.item }}</td>
    </tr>
</table>

export class AppComponent  {
  data = [
    { state: 'MN', county: '1', item: 0.297 },
    { state: 'MN', county: '1', item: 0.04 },
    { state: 'MN', county: '3', item: 0.14 },
    { state: 'CA', county: '2', item: 0.019 },
    { state: 'MN', county: '1', item: 0.0374 }, 
    { state: 'CA', county: '2', item: 0.037 },
    { state: 'CA', county: '3', item: 0.14 }
  ];

  dataExt: any[] = [];

  constructor() {
    this.processData();
  }

  private processData() {
    const statesSeen = {};
    const countiesSeen = {};

    this.dataExt = this.data.sort((a, b) => {
      const stateComp = a.state.localeCompare(b.state);
      return stateComp ? stateComp : a.county.localeCompare(b.county);
    }).map(x => {
      const stateSpan = statesSeen[x.state] ? 0 :
        this.data.filter(y => y.state === x.state).length;

      statesSeen[x.state] = true;

      const countySpan = countiesSeen[x.state] && countiesSeen[x.state][x.county] ? 0 :
        this.data.filter(y => y.state === x.state && y.county === x.county).length;

      countiesSeen[x.state] = countiesSeen[x.state] || {};
      countiesSeen[x.state][x.county] = true;

      return { ...x, stateSpan, countySpan };
    });
  }
}

The resulting table can be viewed here:

https://i.stack.imgur.com/oq3va.png

Answer 9

Answer №5

Maybe try a solution similar to the following:

interface Data {
  category?: string;
  subcategory?: string;
  value: number;
}

private organizeData(inputData: any[]): Data[] {
  // Arrange data alphabetically
  const sortedData = inputData.sort((a, b) => {
    if(a.category < b.category) { return -1; }
    if(a.category > b.category) { return 1; }
    return 0;
  });

  // Keep only one entry per distinct category value
  return sortedData.map((element, index) => {
    if (index === 0 || sortedData[index-1].category !== element.category) {
      return element;
    } else {
      return {
        item: element.item
      };
    }
  });
}

This approach should have a time complexity of `O(log n)` and provide results in the format shown below:

[
  { category: 'A', subcategory: '1', value: 0.123 },
  { value: 0.456 },
  { category: 'B', subcategory: '2', value: 0.789 },
  ...
]

Answer 10

Maybe try a solution similar to the following:

interface Data {
  category?: string;
  subcategory?: string;
  value: number;
}

private organizeData(inputData: any[]): Data[] {
  // Arrange data alphabetically
  const sortedData = inputData.sort((a, b) => {
    if(a.category < b.category) { return -1; }
    if(a.category > b.category) { return 1; }
    return 0;
  });

  // Keep only one entry per distinct category value
  return sortedData.map((element, index) => {
    if (index === 0 || sortedData[index-1].category !== element.category) {
      return element;
    } else {
      return {
        item: element.item
      };
    }
  });
}

This approach should have a time complexity of `O(log n)` and provide results in the format shown below:

[
  { category: 'A', subcategory: '1', value: 0.123 },
  { value: 0.456 },
  { category: 'B', subcategory: '2', value: 0.789 },
  ...
]

Utilizing *ngfor in Angular 7 to Group and Display Data

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The removeClass method does not affect the class attribute when using $(this).attr('class'), but only when using $(this).attr('id')

Whenever a new entry is made into the textfield, the onChange feature triggers a reset on the content within the textfield

Unable to integrate BokehJS with Angular8

Substitute the information in the table with new data

What causes a union with a conditionally assigned property to lead to more relaxed types than anticipated?

Error message: Angular 7 - Running out of memory due to JavaScript heap

Discover the most frequent value in an array by utilizing JavaScript

Using the IE method getelementbyid to target an object within the document

Adding form input fields in real-time by clicking the add button

Implementing a feature to dynamically add multiple markers on Google Maps

Easily refresh multiple select options by using the ajax updater function in prototype

Removing a faded out div with Vanilla JavaScript

Displaying multiple lines in an alert box using Angular 8

When a jQuery click event is triggered, the event.target will return the child element that was clicked within the

Sticky box fails to maintain position as header scrolls

Steps to enable navigation to external pages from a ReactJS app

Using jQuery and PHP to send a dynamic form through AJAX

An easy guide to dynamically assigning a property using jQuery

I need some help with adjusting the number of rows shown per page in MaterialReactTable

Utilizing $http (REST) to send information from a form