Extend angular filter for number in array

Question

I have elements of the form:

{ number: 1, name: 'name1', selected:[100,400,210,103,102], ... },
{ number: 2, name: 'name2', selected:[100,400,210,104,102], ... },
{ number: 3, name: 'name3', selected:[100,103], ... }

(... are other string attributes)

My goal is to write an efficient angular filter to make filtering via the $ property possible while other I can also filter the selected array with the function of a contains filter.

Note that a named property will match properties on the same level only, while the special $ property will match properties on the same level or deeper. E.g. an array item like {name: {first: 'John', last: 'Doe'}} will not be matched by {name: 'John'}, but will be matched by {$: 'John'}.

Filtering with the filter {$: 'name', selected[100,103]} should e.g. return the first and the third element above. Is it possible with simply writing a filter that will filter the selected (which I did) and chaining it with another filter? Or is it even possible without coding my own filter? My Filter code basically is:

.filter('selectedFilter', function (underscore) {
  return function (elements, filter) {
    var result = [];
    for (var idx in elements) {
      var element = elements[idx];
      if (underscore.intersection(element.selected, filter.selected).length === filter.selected.length) {
        result.push(element[idx]);
      }
    }
    return result;
  }
}

I am using the filter like so:

<ion-item ng-repeat="element in vm.filtered = ( vm.filterElements(vm.searchFilter)) 
track by $index"></ion-item>

where

  function filterElements (filter) {
    var filteredElements = $filter('selectedFilter')(vm.elements, filter);
    return filteredTrees;
  }

I did that and I can filter the selected array with that filter. However I can not filter for the $ property anymore. Is that somehow possible with chaining? — niklas
– niklas, Commented Feb 12, 2016 at 13:54
not showing how you are using them both. Why not do it all in your custom filter? — charlietfl
– charlietfl, Commented Feb 12, 2016 at 14:04
I added how I use It. That is my question, how to be able to write a custom filter that will still be able to use the $ property — niklas
– niklas, Commented Feb 12, 2016 at 14:13

Stepan Suvorov · Accepted Answer · 2016-02-12 13:54:15Z

1

You should right your own filter, because you want to different options here.

angular.filter('special', function(){

    return function mySpecificFilter(array, filter){
       return array.filter(function(element){
        element.name === filter.$ && /* filter to check selected field     */
      })
 }

})

answered Feb 12, 2016 at 13:54

Stepan Suvorov

26.3k27 gold badges117 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

niklas Over a year ago

thanks for pointing me at Array.prototype.filter() I will check that

niklas Over a year ago

your first function in filter only works for element.name so the $ functionality is voided

Nina Scholz · Accepted Answer · 2016-02-12 14:02:00Z

1

You can use Array#filter() with plain Javascript:

var array = [{ number: 1, name: 'name1', selected: [100, 400, 210, 103, 102] }, { number: 2, name: 'name2', selected: [100, 400, 210, 104, 102] }, { number: 3, name: 'name3', selected: [100, 103] }],
    search = { selected: [100, 103] },
    result = array.filter(function (a) {
        return Object.keys(search).some(function (k) {
            return search[k].every(function (b) {
                return ~a[k].indexOf(b);
            });
        });
    });

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

answered Feb 12, 2016 at 14:02

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

1 Comment

niklas Over a year ago

Thank you for your pure javascript solution but I am failing to get it to work in angular.

Collectives™ on Stack Overflow

Extend angular filter for number in array

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related