AngularJS ng-repeat over an array with filter

Question

I have a JS array of objects.

$scope.users = [{
    "name": "alice",
    "city": "london",
    "wards": [{
            "id": 1,
            "number": 24
        },
        {
            "id": 2,
            "number": 25
        },
        {
            "id": 3,
            "number": 26
        }
    ]
},
{
    "name": "bob",
    "city": "london",
    "wards": [{
            "id": 1,
            "number": 24
        },
        {
            "id": 2,
            "number": 25
        },
        {
            "id": 4,
            "number": 27
        }
    ]
}
]

I have a ng-repeat="user in users | filter: searchUser

Here searchUser can contain name, city and ward number. Now the search is working fine for name and city but not for the sub array of objects wards to search for ward number.

Is there an angularJS way with which I could achieve this?

The answer over there only filters the items in the subarray not overall. — Melroy Fernandes
– Melroy Fernandes, Commented Jan 23, 2019 at 5:03

Alaksandar Jesus Gene · Accepted Answer · 2019-01-23 05:09:58Z

No. You need to write your own custom filter.

Here is a sample jsfiddle, tested with input search

alice, bob, london, 26, 27

http://jsfiddle.net/1dura7m3/

If you want exact match, then change -1 to 0

app.filter('myFilter', function(){
    return function(users, search){
    if(!search) return users;
    if(!users || !users.length) return users;
    searchInLower = search.toString().toLowerCase();
    users = users.filter(function(user){
        matches = false;
        if(user.name){
        usernameInLower = user.name.toString().toLowerCase();
        matches = matches || usernameInLower.indexOf(searchInLower) !== -1;
      }
      if(user.city){
        cityInLower = user.city.toString().toLowerCase();
        matches = matches || cityInLower.indexOf(searchInLower) !== -1;
      }
      if(user.wards && user.wards.length && !matches){
        for(var i = 0; i < user.wards.length; i++){
         ward = user.wards[i];
         for(var key in ward){
           objectKeyValueInLower = ward[key].toString().toLowerCase();
           matches = matches || objectKeyValueInLower.indexOf(searchInLower) !== -1;
         }
        }
      }

      return matches
    });
    return users;
  }
})

Collectives™ on Stack Overflow

AngularJS ng-repeat over an array with filter

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related