Count items in array by using ng-repeat AngularJS

Question

I have a JSONfile like this:

vm.names = [{
  'name': 'A'
}, {
  'name': 'A'
}, {
  'name': 'B'
}, {
  'name': 'C'
}, {
  'name': 'C'
}]

I using AngularJS filter repeat it in HTML:

<ul ng-repeat ="name in vm.names | unique'name'>
<li>{{name.name}}</li>
</ul>

Here is issue

A

B

C

So I want count item, I want display like this

A num:2

B num:1

C num:2

How can I do that?

You want to count them with what purpose? I mean, suppose you have a way to do it, what do you need the number for .... in your html, would you bind it to any element or something like that? — lealceldeiro
– lealceldeiro, Commented Apr 7, 2017 at 15:43

lin · Accepted Answer · 2017-04-07 15:47:47Z

3

Just use the groupBy filter provided by angular-filter like in this runnable fiddle demo:

View

<div ng-controller="MyCtrl">
  <ul ng-repeat="item in names | groupBy: 'name' ">
      <li>{{item[0].name}}: {{ item.length}}</li>
  </ul>
</div>

AngularJS application

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

myApp.controller('MyCtrl', function($scope) {
  $scope.names = [{
    'name': 'A'
  }, {
    'name': 'A'
  }, {
    'name': 'B'
  }, {
    'name': 'C'
  }, {
    'name': 'C'
  }];
});

edited Apr 7, 2017 at 15:47

answered Apr 7, 2017 at 15:35

lin

18.5k4 gold badges66 silver badges88 bronze badges

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

Collectives™ on Stack Overflow

Count items in array by using ng-repeat AngularJS

1 Answer 1

View

AngularJS application

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

View

AngularJS application

Comments

Your Answer

Sign up or log in

Post as a guest

Related