在AngularJS中按应用名称+最新时间戳过滤JSON数据

嘿，这个需求我熟！要搞定从API返回的JSON数据里按应用名称分组，再筛选每个应用最新时间戳的条目，核心思路就是先按appName分组，再在每组里保留时间最新的那条。下面给你两种实用的实现方式，你可以根据自己的场景选择：

先看一下你的数据示例 #

原始JSON数据 #

[
  {
    "appName": "AppA",
    "timeStamp": "2024-05-20T14:30:00",
    "details": "Version 1.0"
  },
  {
    "appName": "AppA",
    "timeStamp": "2024-05-21T09:15:00",
    "details": "Version 1.1"
  },
  {
    "appName": "AppB",
    "timeStamp": "2024-05-19T16:45:00",
    "details": "Initial Release"
  },
  {
    "appName": "AppB",
    "timeStamp": "2024-05-22T11:00:00",
    "details": "Version 2.0"
  }
]

期望的过滤结果 #

[
  {
    "appName": "AppA",
    "timeStamp": "2024-05-21T09:15:00",
    "details": "Version 1.1"
  },
  {
    "appName": "AppB",
    "timeStamp": "2024-05-22T11:00:00",
    "details": "Version 2.0"
  }
]

方案一：控制器预处理数据（推荐，性能更优） #

如果你的数据不会频繁变动，优先选这种方式——因为过滤器会在Angular的每次消化周期都执行，数据量大时会影响性能，而预处理只在数据加载时执行一次。

控制器代码 #

angular.module('myApp', [])
.controller('MyController', function($scope) {
  // 模拟从API获取的原始数据
  $scope.rawData = [
    { "appName": "AppA", "timeStamp": "2024-05-20T14:30:00", "details": "Version 1.0" },
    { "appName": "AppA", "timeStamp": "2024-05-21T09:15:00", "details": "Version 1.1" },
    { "appName": "AppB", "timeStamp": "2024-05-19T16:45:00", "details": "Initial Release" },
    { "appName": "AppB", "timeStamp": "2024-05-22T11:00:00", "details": "Version 2.0" }
  ];

  // 封装处理逻辑：分组并筛选最新条目
  const getLatestAppEntries = (data) => {
    const appGroups = {};
    
    data.forEach(item => {
      // 把时间戳转成Date对象，方便比较大小
      const currentItemDate = new Date(item.timeStamp);
      // 如果当前应用还没在分组里，或者当前条目的时间比已存的更新
      if (!appGroups[item.appName] || new Date(appGroups[item.appName].timeStamp) < currentItemDate) {
        appGroups[item.appName] = item;
      }
    });

    // 把分组后的对象转成数组返回
    return Object.values(appGroups);
  };

  // 得到处理后的最终数据
  $scope.filteredData = getLatestAppEntries($scope.rawData);
});

视图代码 #

<div ng-app="myApp" ng-controller="MyController">
  <div ng-repeat="item in filteredData" class="app-item">
    <h3>{{item.appName}}</h3>
    <p>最新更新时间：{{item.timeStamp}}</p>
    <p>详情：{{item.details}}</p>
  </div>
</div>

方案二：自定义过滤器（适合动态过滤场景） #

如果你的数据需要实时动态更新（比如用户操作后数据变化），可以用自定义过滤器，直接在视图里过滤数据。

过滤器+控制器代码 #

angular.module('myApp', [])
// 自定义过滤器：latestByApp
.filter('latestByApp', function() {
  return function(data) {
    // 先判断输入是否为数组，避免报错
    if (!Array.isArray(data)) return [];

    const appGroups = {};
    data.forEach(item => {
      const currentItemDate = new Date(item.timeStamp);
      if (!appGroups[item.appName] || new Date(appGroups[item.appName].timeStamp) < currentItemDate) {
        appGroups[item.appName] = item;
      }
    });

    return Object.values(appGroups);
  };
})
.controller('MyController', function($scope) {
  $scope.rawData = [
    { "appName": "AppA", "timeStamp": "2024-05-20T14:30:00", "details": "Version 1.0" },
    { "appName": "AppA", "timeStamp": "2024-05-21T09:15:00", "details": "Version 1.1" },
    { "appName": "AppB", "timeStamp": "2024-05-19T16:45:00", "details": "Initial Release" },
    { "appName": "AppB", "timeStamp": "2024-05-22T11:00:00", "details": "Version 2.0" }
  ];
});

视图代码 #

<div ng-app="myApp" ng-controller="MyController">
  <div ng-repeat="item in rawData | latestByApp" class="app-item">
    <h3>{{item.appName}}</h3>
    <p>最新更新时间：{{item.timeStamp}}</p>
    <p>详情：{{item.details}}</p>
  </div>
</div>

注意事项 #

• 确保你的timeStamp格式能被new Date()正确解析，如果是特殊格式（比如时间戳数字），需要调整时间转换的逻辑。
• 性能方面：数据量大时优先选方案一，预处理只会执行一次；方案二的过滤器会在每次Angular消化周期触发，频繁执行可能导致性能问题。

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