JavaScript | AngularJS：按嵌套值过滤集合答案

【问题标题】：JavaScript | AngularJS: Filter Collection by Nested ValueJavaScript | AngularJS：按嵌套值过滤集合
【发布时间】：2016-07-01 21:09:14
【问题描述】：

按数组中的嵌套项过滤集合

说有一个集合：

[ { key: '', param: '', array: ['a', 'b', 'c'] },... ]

使用 [Angular] $filter('filter')，如何返回 .array 包含指定值 'c' 的对象集合？

例如，可以想象编写以下内容。

var token = 'c';
var query = { array: token };
var anyWithC = filter(collection, query, true);

这似乎不起作用，所以我尝试了......

var query = { array: [token] };

我认为这也不起作用。

有人可以直接告诉我这个吗？可以这样过滤吗？我必须使用function 而不是查询对象吗？

【问题讨论】：

标签： javascript angularjs collections filter nested

【解决方案1】：

使用Underscore library's_.filter(list, predicate);

工作demo

var sample = [{
  name: 'test',
  lastName: 'test',
  address: ['a', 'b', 'c']
}, {
  name: 'test1',
  lastName: 'test1',
  address: ['d', 'e', 'f']
}, {
  name: 'test2',
  lastName: 'test2',
  address: ['g', 'h', 'i']
}];
//key is the objecy key from which the value will be extracted to compare with the token.
function filterByKey(list, key, token) {
  var filterArray = _.filter(list, function(value) {
    //If Undefined value then should return false
    if (_.isUndefined(value[key])) {
      return false;
    } else if (_.isArray(value[key])) {
      //Checks the extracted value is an Array
      return _.contains(value[key], token);
    }else {
        return value[key] === token;
    }
  });
  return filterArray;
}

console.log('Output ------------- ', filterByKey(sample, 'address', 'h'));

【讨论】：

【解决方案2】：

你可以使用 lodash https://lodash.com/docs

使用 angular 和 lodash 创建了一个 JSFiddle： https://jsfiddle.net/41rvv8o8/

这是基于您提供的数据，此演示不区分大小写（大小写）。

HTML

<div ng-app="app">
  <example-directive>
  </example-directive>
</div>

Javascript

var app = angular.module('app',[]);

app.directive('exampleDirective', function() {
    return {
    template:'<h1>Collections with array containing c</h1><ul><li ng-repeat="collection in matchcollections">key: {{collection.key}}, param: {{collection.param}}, <div ng-repeat="item in collection.array">{{item}}</div></li></ul>',
    controller: function($scope){

      $scope.collections = [ { key: 'A', param: 'A1', array: ['a', 'b', 'c'] },{ key: 'B', param: 'B1', array: ['x', 'h', 'c'] },{ key: 'C', param: 'C', array: ['t', 'a', 'k'] }];

      $scope.matchcollections = _.filter($scope.collections, function(c){
        return _.includes(c.array,'c')
      });
      console.log("Collection with match: ", $scope.matchcollections);
    }
  }
});

希望这会有所帮助！

【讨论】：