How do I implement a filter in AngularJS?

Question

How do I filter an array by a property that exists in another array?

I have this two arrays in my control:

this.items = [{ "Id": 1, "TypeId": 1, "name": "Michael" },
              { "Id": 2, "TypeId": 2, "name": "Helga" },
              { "Id": 3, "TypeId": 1, "name": "Max" },
              { "Id": 4, "TypeId": 2, "name": "Ann" }];

this.filterBy = [{ "Id": 1, "gender": "Male" },
                 { "Id": 2, "gender": "female" }];

And here is my ng-repeat in view template:

<tr ng-repeat="item in list.items">
    <td>
        <div class="container-fluid">
            <div class="row">
                <div class="text-center">{{ item.name }}</div>
            </div>
        </div>
    </td>
</tr>

Here is the generated view:

At some point I want to filter items array by gender to show in the view above only females or only males.

I tried to implement filter, like this:

(function () {

    "use strict";

    angular.module("sensorsData").filter('filterByGender', filterByGender);

    function filterByGender() {
        var result = [];
        return function (items, filterBy) {
            if (!items)
                return;
            if (!filterBy)
                return;

            angular.forEach(items, function (item) {
                angular.forEach(filterBy, function (f) {
                    if (item.TypeId == f.Id) {
                        result.push(item);
                    }
                })
            });
            return result;
        }
    };
})();

And here how I use it in view template:

<tr ng-repeat="item in list.items | filterByGender:list.filterBy">
    <td>
        <div class="container-fluid">
            <div class="row">
                <div class="text-center">{{ item.name }}</div>
            </div>
        </div>
    </td>
</tr>

The desired view in case if content of filterBy array like that:

this.filterBy = [{ "Id": 1, "gender": "Male" }];

The view Should display only items rows with TypeId = 1.

Like this:

But the filter above is not working.

And in the debugger I get this errors:

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: r in list.arr | filterByAlert:list.filterBy, Duplicate key: object:8, Duplicate value: {"Id":1,"TypeId":1,"name":"Michael"}
http://errors.angularjs.org/1.5.3/ngRepeat/dupes?p0=r%20in%20list.arr%20%7C…%3A8&p2=%7B%22Id%22%3A1%2C%22TypeId%22%3A1%2C%22name%22%3A%22Michael%22%7D
    at angular.js:68
    at ngRepeatAction (angular.js:28799)
    at $watchCollectionAction (angular.js:16734)
    at Scope.$digest (angular.js:16869)
    at Scope.$apply (angular.js:17133)
    at done (angular.js:11454)
    at completeRequest (angular.js:11652)
    at XMLHttpRequest.requestLoaded (angular.js:11593)

Why is the filter not working? And how can I create a filter to show items by gender?

And this:

angular.js:13424 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.5.3/$rootScope/infdig?p0=10&p1=%5B%5D
    at angular.js:68
    at Scope.$digest (angular.js:16907)
    at Scope.$apply (angular.js:17133)
    at done (angular.js:11454)
    at completeRequest (angular.js:11652)
    at XMLHttpRequest.requestLoaded (angular.js:11593)(anonymous function) @ angular.js:13424
angular.js:17136 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.5.3/$rootScope/infdig?p0=10&p1=%5B%5D

And this:

    Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
    Watchers fired in the last 5 iterations: []

Why is the filter not working? And how can I create a filter to show items by gender?

Is there a particular reason you're not filtering the list by typeId? Or that you've separated out what seems like relevant data into another variable? — Jhecht
– Jhecht, Commented Apr 15, 2016 at 15:18
@Jhecht , I need to filter data in generated view according to changes in filterBy array. — Michael
– Michael, Commented Apr 15, 2016 at 15:25
What do you mean by "the filter above not working"? What is the result? What did you expect? — Hugo Wood
– Hugo Wood, Commented Apr 15, 2016 at 15:26
Could you provide examples of the expected output for some given input? For example, you don't mention what you expect your filter to output for the 2 input arrays you give at the beginning of your question. — Hugo Wood
– Hugo Wood, Commented Apr 15, 2016 at 15:36

Hugo Wood · Accepted Answer · 2016-04-15 15:55:55Z

The problem is that you are declaring the result array in the wrong place.

function filterByGender() {
    var result = [];
    return function (items, filterBy) {
        ...
        return result;
    }
};

The filterByGender function here is what creates the filter function, while the anonymous inner function starting on line 3 is the actual filter function. Angular calls filterByGender only once, to build the filter, then calls the second function each time the inputs change. In your current code, the result array is always the same (i.e. only one exist in the lifetime of the application) and every time the filter is invoked, the items get pushed again into it. The filter then returns this array full of duplicates, and you get errors from Angular.

What you want instead is to get new results each time the inputs change, so results should be declared and initialized in the anonymous function, not filterByGender. Try this:

function filterByGender() {
    return function (items, filterBy) {
        var result = [];
        ...
        return result;
    }
};

fikkatra · Accepted Answer · 2016-04-15 15:45:28Z

You could use some very complicated filtering-with-functions-solution, but honoustly the easiest way in my opinion is to create a merged list of items that contains exactly what your view needs (i.e. a view model). This way, you can simply use filter on the ng-repeat to filter on gender.

Here's a code snippet:

var app = angular.module('myapp', []);
app.controller('myctrl', function($scope) {
  var items = [{ "Id": 1, "TypeId": 1, "name": "Michael" },
              { "Id": 2, "TypeId": 2, "name": "Helga" },
              { "Id": 3, "TypeId": 1, "name": "Max" },
              { "Id": 4, "TypeId": 2, "name": "Ann" }];


 $scope.types = [{ "Id": 1, "gender": "Male" },
                 { "Id": 2, "gender": "female" }];
  $scope.filterBy = $scope.types[0];

  var constructViewModel = function(items, types) {
    $scope.mergedItems = [];
    angular.forEach(items, function(i){
      var mergedItem = angular.copy(i);
      var type = types.filter(function(t){return t.Id == i.TypeId})[0];
      mergedItem.gender = type.gender;
      $scope.mergedItems.push(mergedItem);
    });
  }
  
  constructViewModel(items, $scope.types);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myctrl">
  <span>Filter by gender: </span><select ng-model="filterBy" ng-options="t as t.gender for t in types"></select>
  <div ng-repeat="item in mergedItems | filter: { gender: filterBy.gender } :true">
    <td>
      <div class="container-fluid">
        <div class="row">
          <div class="text-center">{{ item.name }} {{item.gender}}</div>
        </div>
      </div>
    </td>
  </div>
</div>

Collectives™ on Stack Overflow

How do I implement a filter in AngularJS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related