get count of items with some property in an array

Question

I have an array of objects as follow.

$scope.students = [{'isSelected': true},
    {'isSelected': true},
    {'isSelected': false},
    {'isSelected': true},
    {'isSelected': true},
]

How can i get the count items that have isSelected property set to true ?

UPDATE:

The problem is $scope.students is fetched from a REST api and simply looping over the $scope.students variable does not work as the variable is undefined until the request is completed, and so the loop code errors out saying $scope.students is not defined.

I tried using $watch but in that case i have to define the loop under the watch directive and it only works one time when $scope.students is defined, after that the loop does not work as $scope.students itself is not changing.

WJK · Accepted Answer · 2015-03-23 20:34:14Z

27

There is another way to do this: the AngularJS filters. You can write this:

var selectedCount = $filter('filter')($scope.students, { isSelected: true }).length;

edited Mar 23, 2015 at 20:34

WJK

6832 gold badges6 silver badges20 bronze badges

answered Nov 17, 2014 at 13:52

Samuele Furnari

6557 silver badges13 bronze badges

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

Comments

TimoSolo · Accepted Answer · 2016-04-04 10:57:14Z

21

You could also use javascript filter method (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)

$scope.selectedStudentsCount = function() {
  return $scope.students.filter(function(obj){return obj.isSelected}).length;
}

answered Apr 4, 2016 at 10:57

TimoSolo

7,3756 gold badges36 silver badges51 bronze badges

3 Comments

dǝɥɔS ʇoıןןƎ Over a year ago

What advantage does this have over AngularJS filters (other than being available without AngularJS, which this question isn't about)? Why use this rather than AngularJS filters?

TimoSolo Over a year ago

No major advantages, just an alternative using standard js.

Félix Paradis Over a year ago

+1 And if you can afford ES6, you may want to use an arrow function like the cool kids do return $scope.students.filter((obj) => obj.isSelected).length;

Tom · Accepted Answer · 2013-03-12 12:21:29Z

20

You can add the following method to your controller. Variable selectedStudentsCount in your scope will keep number of all selected students (where isSelected is set to true).

Function counting selected users in angular.forEach will be executed only if studentsis not empty. Otherwise for empty students variable selectedStudentsCount will return 0.

$scope.selectedStudentsCount = function() {
    var count = 0;
    angular.forEach($scope.students, function(student){
        count += student.isSelected ? 1 : 0;
    });
    return count; 
}

Please note that selectedStudentsCount is a function so it will have to be called with () in your template e.g.

<h2>Total selected students: {{selectedStudentsCount()}}</h2>

edited Mar 12, 2013 at 12:21

answered Mar 12, 2013 at 12:11

Tom

26.9k22 gold badges104 silver badges113 bronze badges

3 Comments

Amyth Over a year ago

Thanks, I did something pretty similar, instead of returning the count, I updated the total number of selected students as a var within the function. and use the method with ng-click. Thanks again.

Julian Veling Over a year ago

Don't forget the semicolon after the parentheses on the function call, even in the template view!

its me Over a year ago

need yours help on this :- stackoverflow.com/questions/72084738/…

Collectives™ on Stack Overflow

get count of items with some property in an array

UPDATE:

3 Answers 3

Comments

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE:

3 Answers 3

Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related