如何在AngularJS前端对API返回的数据进行分组？

Hey there! Totally get where you're coming from—when you're still ramping up on AngularJS and stuck on a data grouping task without touching the backend, it can feel like a roadblock. But good news: you absolutely can handle this entirely on the frontend, no API or database changes needed. Let's break down a couple of solid, straightforward approaches for you.

Approach 1: Create a Custom groupBy Filter #

AngularJS doesn't include a built-in groupBy filter in its core, but rolling your own is super simple. This works great if you want to keep your controller logic clean and handle grouping directly in the template.

First, define the filter in your app module:

angular.module('yourSubmoduleApp')
.filter('groupBy', function() {
  return function(collection, groupKey) {
    // Exit early if no data or grouping key is provided
    if (!collection || !groupKey) return collection;

    const groupedResults = {};
    angular.forEach(collection, function(item) {
      const keyValue = item[groupKey];
      // Initialize the group array if it doesn't exist
      if (!groupedResults[keyValue]) {
        groupedResults[keyValue] = [];
      }
      // Add the current item to its group
      groupedResults[keyValue].push(item);
    });
    return groupedResults;
  };
});

Then use it in your template to group by whatever field you need (e.g., userID, activityID, or even a combination). Here's an example grouping by userID:

<div ng-repeat="(userId, userItems) in yourFetchedData | groupBy:'userID'">
  <h3>User: {{ userId }}</h3>
  <div class="item-list">
    <div ng-repeat="item in userItems">
      Activity ID: {{ item.activityID }} | Start Date: {{ item.startDate | date:'MM/dd/yyyy' }}
    </div>
  </div>
</div>

Approach 2: Pre-Group Data in Your Controller #

If you're working with a larger dataset, pre-processing the grouping in your controller is more efficient. This way, the grouping logic runs only once when the data loads, instead of repeatedly during Angular's digest cycles.

Here's how to implement this:

angular.module('yourSubmoduleApp')
.controller('YourSubmoduleController', function($scope, $http) {
  // Fetch data from your backend endpoint
  $http.get('/api/your-data-endpoint')
    .then(function(response) {
      $scope.rawData = response.data;
      // Group the data immediately after fetching
      $scope.groupedByUser = groupDataByKey($scope.rawData, 'userID');
    });

  // Helper function to handle grouping logic
  function groupDataByKey(collection, key) {
    const grouped = {};
    angular.forEach(collection, function(item) {
      const keyVal = item[key];
      if (!grouped[keyVal]) {
        grouped[keyVal] = [];
      }
      grouped[keyVal].push(item);
    });
    return grouped;
  }
});

Then in your template, loop through the pre-grouped data directly:

<div ng-repeat="(userId, userItems) in groupedByUser">
  <h3>User: {{ userId }}</h3>
  <div class="item-list">
    <div ng-repeat="item in userItems">
      Activity ID: {{ item.activityID }} | Start Date: {{ item.startDate | date:'MM/dd/yyyy' }}
    </div>
  </div>
</div>

Bonus: Group by Multiple Fields #

If you ever need to group by more than one field (e.g., userID and activityID), just adjust the grouping key to be a combination of the values:

// In the filter or helper function
const keyValue = `${item.userID}-${item.activityID}`;

Both approaches work perfectly without touching your backend—pick whichever fits your project's size and your coding style better. Happy coding!

内容的提问来源于stack exchange，提问作者AJ-