Home > Web Front-end > JS Tutorial > How to Group Data by Team Using Angular\'s groupBy Filter?

How to Group Data by Team Using Angular\'s groupBy Filter?

Susan Sarandon
Release: 2024-11-17 11:59:02
Original
238 people have browsed it

How to Group Data by Team Using Angular's groupBy Filter?

Group Data with Angular Filter: A Comprehensive Guide

Grouping data into meaningful categories is a common task in programming, and Angular provides a powerful filtering mechanism to facilitate this. This article demonstrates how to use Angular's groupBy filter to organize a list of players into teams.

Problem:

You have a dataset of players with their respective teams. You need to filter this dataset to display players grouped by their teams.

Example Dataset:

players = [
  { name: 'Gene', team: 'team alpha' },
  { name: 'George', team: 'team beta' },
  { name: 'Steve', team: 'team gamma' },
  { name: 'Paula', team: 'team beta' },
  { name: 'Scruath', team: 'team gamma' }
];
Copy after login

Expected Output:

<li>team alpha
  <ul>
    <li>Gene</li>
  </ul>
</li>
<li>team beta
  <ul>
    <li>George</li>
    <li>Paula</li>
  </ul>
</li>
<li>team gamma
  <ul>
    <li>Steve</li>
    <li>Scruath</li>
  </ul>
</li>
Copy after login

Solution:

To achieve this grouping, Angular provides the groupBy filter from its angular.filter module. This filter takes a property as an argument and returns an object where the keys are the unique values of that property, and the values are arrays of the objects that share that property value.

In our case, we want to group players by their team property. Here's how we can do it:

JavaScript:

$scope.players = players; // Assign the dataset to a scope variable
Copy after login

HTML:

<ul ng-repeat="(team, players) in players | groupBy: 'team'">
  <li>{{team}}
    <ul>
      <li ng-repeat="player in players">{{player.name}}</li>
    </ul>
  </li>
</ul>
Copy after login

By combining the groupBy filter with ng-repeat, we can create a hierarchical view of the data, where each team is displayed as a list item, and the players belonging to that team are listed as nested list items. The result is an organized and easy-to-understand representation of the grouped data.

Note:

To use the angular.filter module, it must be added as a dependency in your Angular module.

The above is the detailed content of How to Group Data by Team Using Angular\'s groupBy Filter?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template