Angularjs Filter by an Array of values

Question

i've checqued this : AngularJS filter based on array of strings?

But i've still got difficulties to know how to do :

My data model is this, they are footballers :

$scope.footballers = [
        {'identifiant':1,'prenom':'Jean','nom':'Valjean','categorie':1,'ville':'Détroit','age':12,'date_embauche':'','salaire':25,'photo':'1.jpg','vitesse':55,'agilite':3,'deduction':25,'choisi':false},
        {'identifiant':2,'prenom':'Aziz','nom':'Jojo','categorie':2,'ville':'Paris','age':14,'date_embauche':'','salaire':25,'vitesse':57,'agilite':31,'deduction':25,'choisi':false},
        {'identifiant':3,'prenom':'Thierry','nom':'Goubert','categorie':1,'ville':'Paris','age':17,'date_embauche':'','salaire':28,'photo':'2.jpg','vitesse':45,'agilite':3,'deduction':2,'choisi':false},
        {'identifiant':4,'prenom':'Roland','nom':'Grondin','categorie':2,'ville':'Paris','age':14,'date_embauche':'','salaire':25,'vitesse':5,'agilite':34,'deduction':2,'choisi':false},
        {'identifiant':5,'prenom':'Gogok','nom':'Rodolphe','categorie':1,'ville':'Paris','age':17,'date_embauche':'','salaire':28,'photo':'3.jpg','vitesse':68,'agilite':75,'deduction':2,'choisi':false},
        {'identifiant':6,'prenom':'Thierry','nom':'Chalamerto','categorie':1,'ville':'Paris','age':17,'date_embauche':'','salaire':28,'vitesse':55,'agilite':57,'deduction':75,'choisi':false},
        {'identifiant':7,'prenom':'Gawivk','nom':'Gonzogues','categorie':2,'ville':'Paris','age':14,'date_embauche':'','salaire':25,'vitesse':10,'agilite':44,'deduction':2,'choisi':false},
        {'identifiant':8,'prenom':'Thomas','nom':'Choubal','categorie':1,'ville':'Paris','age':12,'date_embauche':'','salaire':28,'vitesse':5,'agilite':3,'deduction':2,'choisi':false}
    ];

Now, I would like to display only the footballer who has the identifiant 2,3 and 8 for example.

Let's say I 've got this array :

var iwanttofilter = [2,3,8];

How could i do to filter with angularJs, firstly, in my ng-repeat, and secondly directly into my controller ?

Thank you.

You'll want to use an AngularJS filter: docs.angularjs.org/api/ng/filter/filter — HaveSpacesuit
– HaveSpacesuit, Commented Apr 11, 2017 at 16:35

Navoneel Talukdar · Accepted Answer · 2017-04-11 16:55:08Z

2

In pure angular way

var filteredList = $filter('filter')($scope.footballers, function (i) {
  return (i.identifiant === 2 || i.identifiant === 3 || i.identifiant === 8);
});

answered Apr 11, 2017 at 16:55

Navoneel Talukdar

4,6365 gold badges23 silver badges43 bronze badges

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

2 Comments

user7370387 Over a year ago

Thanks a lot, let's try this!

user7370387 Over a year ago

This is Exactly what i need, except that it doesn't pick values from the iwanttofilter array. how could i add a angular.foreach or a for loop inside the function to iterate over the iwanttofilter array ?

Sachila Ranawaka · Accepted Answer · 2017-04-12 04:04:46Z

you can create a custom filter like this

 .filter('cust',function(){
      var iwanttofilter = [2,3,8];
      return function(item){ 
         return item.filter(o=>iwanttofilter.find(k=> o.identifiant == k))        
      }
 })

in here array will filter according the iwanttofilter array and return the result

Demo

angular.module("app",[])
.controller("ctrl",function($scope){

$scope.footballers = [
        {'identifiant':1,'prenom':'Jean','nom':'Valjean','categorie':1,'ville':'Détroit','age':12,'date_embauche':'','salaire':25,'photo':'1.jpg','vitesse':55,'agilite':3,'deduction':25,'choisi':false},
        {'identifiant':2,'prenom':'Aziz','nom':'Jojo','categorie':2,'ville':'Paris','age':14,'date_embauche':'','salaire':25,'vitesse':57,'agilite':31,'deduction':25,'choisi':false},
        {'identifiant':3,'prenom':'Thierry','nom':'Goubert','categorie':1,'ville':'Paris','age':17,'date_embauche':'','salaire':28,'photo':'2.jpg','vitesse':45,'agilite':3,'deduction':2,'choisi':false},
        {'identifiant':4,'prenom':'Roland','nom':'Grondin','categorie':2,'ville':'Paris','age':14,'date_embauche':'','salaire':25,'vitesse':5,'agilite':34,'deduction':2,'choisi':false},
        {'identifiant':5,'prenom':'Gogok','nom':'Rodolphe','categorie':1,'ville':'Paris','age':17,'date_embauche':'','salaire':28,'photo':'3.jpg','vitesse':68,'agilite':75,'deduction':2,'choisi':false},
        {'identifiant':6,'prenom':'Thierry','nom':'Chalamerto','categorie':1,'ville':'Paris','age':17,'date_embauche':'','salaire':28,'vitesse':55,'agilite':57,'deduction':75,'choisi':false},
        {'identifiant':7,'prenom':'Gawivk','nom':'Gonzogues','categorie':2,'ville':'Paris','age':14,'date_embauche':'','salaire':25,'vitesse':10,'agilite':44,'deduction':2,'choisi':false},
        {'identifiant':8,'prenom':'Thomas','nom':'Choubal','categorie':1,'ville':'Paris','age':12,'date_embauche':'','salaire':28,'vitesse':5,'agilite':3,'deduction':2,'choisi':false}
    ];
    
    var iwanttofilter = [2,3,8];
    $scope.cust = function(){
      return function(item){
        return iwanttofilter.find(k=> item.identifiant == k)
      }
    }
    
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div ng-repeat="item in footballers | filter:cust() track by $index ">{{item.identifiant}} </div>
</div>

But the iwanttofilter array is inside the controller, not inside the filter, i dont know what to do. the iwanttofilter array values might change anytime.

HaveSpacesuit · Accepted Answer · 2017-04-11 17:10:14Z

0

You pass the iwanttofilter into the filter, and filter your list based on each item.

MyApp.filter("fewerFootballers", [
    function() {
        return function(footballers, iwanttofilter) {
            return arrayIntersection(footballers, iwanttofilter);

            function arrayIntersection(a, b) {
                return a.filter(function(x) {
                    return b.indexOf(x.identifiant) != -1;
                });
            }
        }
    }]);

In your html you use the filter.

{{ $scope.footballers | fewerFootballers: $scope.iwanttofilter }}

answered Apr 11, 2017 at 17:10

HaveSpacesuit

4,0727 gold badges50 silver badges69 bronze badges

3 Comments

user7370387 Over a year ago

Ok let's try this

HaveSpacesuit Over a year ago

Did you have any luck?

user7370387 Over a year ago

Yes it is working thank you a lot, but i've had to use the filter directly inside a function ... See this stackoverflow.com/questions/43353644/…

Collectives™ on Stack Overflow

Angularjs Filter by an Array of values

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related