如何过滤对象数组？答案

【问题标题】：How to filter array of objects?如何过滤对象数组？
【发布时间】：2016-04-30 04:00:34
【问题描述】：

我有这个数组：

$scope.damageEvants =
    [
       {"id":2, "StartDate":21/05/2012, EndDate:null},
       {"id":3, "StartDate":null, EndDate:02/09/2014},
       {"id":4, "StartDate":null, EndDate:null},
       {"id":5, "StartDate":21/05/2012, EndDate:null}
    ];

我想从数组中过滤（删除）属性 startDate 和 EndDate 为空的所有对象。

过滤后的结果：

$scope.damageEvants =
    [
       {"id":2, "StartDate":21/05/2012, EndDate:null},
       {"id":3, "StartDate":null, EndDate:02/09/2014},
       {"id":5, "StartDate":21/05/2012, EndDate:null}
    ];

我试过了：

$scope.damageEvants.filter(return item.StartDate!== null && item.EndDate !== null  )

但这似乎是错误的方式。

如何使用过滤功能过滤$scope.damageEvants？

【问题讨论】：

标签： javascript jquery angularjs

【解决方案1】：

$scope.damageEvants.filter(return item.StartDate!== null && item.EndDate !== null )

应该是

$scope.damageEvants.filter(function(item) {
     return item.StartDate!== null && item.EndDate !== null;
});

filter

【讨论】：

【解决方案2】：

$scope.damageEvants = $scope.damageEvants.filter(function(item) {
     return item.StartDate!== null && item.EndDate !== null;
});

【讨论】：

【解决方案3】：

只需检查是否设置了任一日期。

var array = [{ "id": 2, "StartDate": '21/05/2012', EndDate: null }, { "id": 3, "StartDate": null, EndDate: '02/09/2014' }, { "id": 4, "StartDate": null, EndDate: null }, { "id": 5, "StartDate": '21/05/2012', EndDate: null }],
    result = array.filter(function (a) {
        return a.StartDate || a.EndDate;
    });

document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');

ES6 版本

var array = [{ "id": 2, "StartDate": '21/05/2012', EndDate: null }, { "id": 3, "StartDate": null, EndDate: '02/09/2014' }, { "id": 4, "StartDate": null, EndDate: null }, { "id": 5, "StartDate": '21/05/2012', EndDate: null }],
    result = array.filter(a => a.StartDate || a.EndDate);

document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');

【讨论】：

【解决方案4】：

正如 Sushanth 的回答所示，.filter() 期望接收一个函数值，该函数返回一个布尔值，该值确定当前数组成员是否在过滤后的数组中。您的代码正在传递过滤器一个布尔值而不是一个函数值。

【讨论】：

【解决方案5】：

另一种选择是在 angular.forEach 循环中拼接对象。这实际上会从原始数组中删除对象，而不是创建一个新数组。

示例：https://jsfiddle.net/gh03zur4/

控制器

        function Controller($scope) {
      $scope.damageEvants = [{
        "id": 2,
        "StartDate": 21 / 05 / 2012,
        EndDate: null
      }, {
        "id": 3,
        "StartDate": null,
        EndDate: 02 / 09 / 2014
      }, {
        "id": 4,
        "StartDate": null,
        EndDate: null
      }, {
        "id": 5,
        "StartDate": 21 / 05 / 2012,
        EndDate: null
      }];

      angular.forEach($scope.damageEvants, function(event) {
        if (!event.EndDate && !event.StartDate) {
          var idx = $scope.damageEvants.indexOf(event);
          $scope.damageEvants.splice(idx, 1);
        }
      });
    }

根据 Sushanth 的回答，另一种选择是在您的 ng-repeat 列表中应用过滤器，如下所示：

https://jsfiddle.net/qj7dz2eq/

控制器

$scope.filterEvents = function(item) {
  return item.StartDate !== null || item.EndDate !== null;
}

HTML

<ul>
    <li ng-repeat="item in damageEvants | filter:filterEvents">{{item.id}}</li>
</ul>

以其中一种方式执行此操作可防止同一数组被绑定到 $scope 两次。

【讨论】：

【解决方案6】：

可以试试：

$scope.damageEvants = $scope.damageEvants.filter(function(obj) {
    return !(obj.StartDate === obj.EndDate && obj.StartDate === null);
});

【讨论】：