count the number of elements in the JSON array using angularJS

Question

This is my json data

$scope.players = [
        {name: 'Bruce Wayne', shirt: 'XXL', pants: '42', shoes: '12'},
        {name: 'Wayne Gretzky', shirt: 'XL', pants: '38', shoes: '10'},
        {name: 'Michael Jordan', shirt: 'M', pants: '32', shoes: '9'},
        {name: 'Rodman', shirt: 'XSXL', pants: '42', shoes: '11'},
        {name: 'Jake Smitz', shirt: 'XXL', pants: '42', shoes: '12'},
        {name: 'Will Will', shirt: 'XXLL', pants: '42', shoes: '12'},
        {name: 'Youasdf Oukls', shirt: 'XL', pants: '38', shoes: '10'},
        {name: 'Sam Sneed', shirt: 'XL', pants: '38', shoes: '10'},
        {name: 'Bill Waxy', shirt: 'M', pants: '32', shoes: '9'},
        {name: 'Javier Xavior', shirt: 'M', pants: '32', shoes: '9'},
        {name: 'Bill Knight', shirt: 'M', pants: '32', shoes: '9'},        
        {name: 'One More', shirt: 'M', pants: '100', shoes: '9'},        
        {name: 'Player One', shirt: 'XXL', pants: '42', shoes: '100'},
        {name: 'Space Cadet', shirt: 'XXL', pants: '42', shoes: '100'},
        {name: 'Player Two', shirt: 'XXXXL', pants: '42', shoes: '12'}
    ]; 

here is my HTML code to count the number of objects

<div>
        <div ng-repeat="shoes in shoesGroup">
            <b><input type="checkbox" ng-model="useShoes[shoes]"/>{{shoes}}</b>
            <span>({{(filteredPlayers | filter:shoes :true).length}})</span>
        </div>
    </div>

the problem is I want to display the number of shoes with size:100 ,that should give the answer as 2 according to my data,but it is reading all the 100's in my JSON data and giving answer as 3 since one more hundred is there where pants:100,

my answer should be

pants 100(1)
 shoes 100(2)

but Iam getting as pants 100(3) shoes100(3) Please help in solving this

This is the controller for shoesgroup to display only unique items

$scope.shoesGroup = uniqueItems(filterAfterShirts, 'shoes');
        var filterAfterShoes = [];        
        selected = false;
        for (var j in filterAfterShirts) {
            var p = filterAfterShirts[j];
            for (var i in $scope.useShoes) {
                if ($scope.useShoes[i]) {
                    selected = true;
                    if (i == p.shoes) {
                        filterAfterShoes.push(p);
                        break;
                    }
                }
            }    
        }
        if (!selected) {
            filterAfterShoes = filterAfterShirts;
        }        

        $scope.filteredPlayers = filterAfterShoes;        
    }, true);

and this is the function for unique items

var uniqueItems = function (data, key) {
    //alert("test");
    var result = new Array();
    for (var i = 0; i < data.length; i++) {
        var value = data[i][key];

        if (result.indexOf(value) == -1) {
            result.push(value);
        }

    }
    return result;
};

Answer 1

If you simply want to show the number of shoes and pants with size 100, you can do this:

    $scope.p = 0, $scope.s = 0;
    for(var i=0; i<$scope.players.length; i++) {
      if($scope.players[i].pants == '100') {
        $scope.p++;
      }
      if($scope.players[i].shoes == '100') {
        $scope.s++;
      }
    }

In HTML:

<div>
   shoes({{s}})
   pants({{p}})
</div>