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

Is there a way to send an array of objects to my Express / SQL Server in react?

Using an iframe to access HTTP content from an HTTPS website

when the AJAX request has a specific condition

Incorporate audio playback on image click using JavaScript, with the feature to automatically pause the playback if multiple images are playing simultaneously

The method for connecting the width of a panel to the height of the viewport in Ext Js

Is there a way to adjust the height of one div based on the height of another div in Bootstrap?

Issue encountered with Typescript and Mongoose while operating within a Kubernetes cluster environment with Skaffold configuration

Initializing a table with data will only function properly when a breakpoint is set

Troubleshooting regex validation issues in a JSFiddle form

Angular2 app hosted on firebase displaying an empty page

Implement jQuery to close multiple div elements

How can I receive user input in JavaScript while incorporating three.js?

ES6 Update: Manipulating Nested Arrays with JavaScript

Utilizing jQuery to extract the `h1` element from a dynamically loaded external page within the

Empty results in NgRx Parameterized Selector

Why won't the code for detecting the DEL key in a textarea work on my computer?

When attempting to use nodejs's collection.find() method with MongoDB, no response is received

Following the upgrade of Angular, the webpack module source-map-loader is encountering an error: "this.getOptions is not a function"

Attempting to run driver.execute_script(gooogletag but no response was received

What is the best way to style radio boxes in HTML to resemble checkboxes and display X's when selected?