Angular JS +使用$ filter从对象列表中获取属性到Array中

Question

I need get specific attributes from items within a array of objects.

Example

var arrayOfObjects = [
  {"name":"as","code":"9874"},
  {"name":"sd","code":"9541"},
  {"name":"df","code":"1574"},
  {"name":"fg","code":"5874"},
  {"name":"gh","code":"3652"},
  {"name":"hj","code":"1452"}
]

Result

var newArrayOfObjectsFiltered = [
  {"code":"9874"},
  {"code":"9541"},
  {"code":"1574"},
  {"code":"5874"},
  {"code":"3652"},
  {"code":"1452"}
]

As you can see, I want the code property from each object in the list.

I already tried the following but it doesn't work:

var filteredArray = filterFilter(arrayOfObjects, 'code');

Answer 1

You need custom filter like this

app.filter('myFilter, 'function(){
  return function(array){
    if(!arrayOfObjects) return [];
    return arrayOfObjects.map(function(obj){
      return { "code": obj.code }
    })
  }
})

Answer 2

I would not even use a filter for that unless you need it in one of your templates. If you only filter things in your controller or service you can simply use Array.prototype.map() and reminds of a more functional way. In combination with utility libraries like lodash you can do it as follows:

arrayOfObjects.map(function(item) {
    return _.pick(item, 'code');
});

Pick only takes the specified properties.

_.pick(object, [predicate], [thisArg])

Creates an object composed of the picked object properties. Property names may be specified as individual arguments or as arrays of property names. If predicate is provided it's invoked for each property of object picking the properties predicate returns truthy for. The predicate is bound to thisArg and invoked with three arguments: (value, key, object).

Update 1

In case you need it in a template, eg to filter a collection passed to ng-repeat you can simply insert the code snippet into a custom filter like so:

angular.module('app', []).filter('myCustomFilter', function() {
    return function(input, properties) {
        return input.map(function(item) {
            return _.pick(item, properties);
        });
    };
});

You can then use it like so:

<li ng-repeat="item in arrayOfObjects | myCustomFilter:['code']"></li>

The result will be that each item only has the specified properties.