How to check if a sub-array of objects contains string in Angular Filter

Question

I have an object with arrays of objects inside like this:

Companies =
{
  "-KGZPUea1ZtWVXspLRGF" : {
    "assignedUsers" : [ {
      "email" : "[email protected]"
    } ],
    "name" : "Talon"
  },
  "-KGcS8doqRw1Jcemhxuz" : {
    "assignedUsers" : [ {
      "email" : "[email protected]",
      "status" : "active"
    } ],
    "name" : "Billy"
  }
}

I wan't to be able to create an angular filter which filters out only companies where a specific email is assigned and their status is active.

Something like this

<div ng-repeat="company in Companies | filter:{assignedUsers contains '[email protected]' && assignedUsers.status == 'active'}">

Is something like that possible?

Yes, it's possible, since filter can take a custom predicate function as argument, and the predicate function can do whatever it wants. docs.angularjs.org/api/ng/filter/filter — JB Nizet
– JB Nizet, Commented Apr 30, 2016 at 19:01

Matthew Haugen · Accepted Answer · 2016-04-30 21:36:48Z

1

Yes, this is doable. No, it can't be done purely in your view.

Benefiting from the fact that filters can take functions to evaluate, you could write this logic into your controller.

scope.testCompany = function(company) {
    if (!company || !company.assignedUsers) return false;

    for (var i = 0; i < company.assignedUsers.length; i++) {
        var e = company.assignedUsers[i];

        if (e.email === '[email protected]' && e.status === 'active') {
            return true;
        }
    }

    return false;
};

Then you can just use that.

<div ng-repeat="company in Companies | filter:testCompany">

If you want to dynamically set the email address, you have two options. One would be to set up a new filter (as in, angular.module(...).filter(...)), or you could just set up your function from above to accept a parameter. The filter option is probably a bit better philosophically, but either works.

scope.testCompanyForEmail = function(emailAddress) {
    return function(company) {
        if (!company || !company.assignedUsers) return false;

        for (var i = 0; i < company.assignedUsers.length; i++) {
            var e = company.assignedUsers[i];

            if (e.email === emailAddress && e.status === 'active') {
                return true;
            }
        }

        return false;
    }
};

Utilized as:

<div ng-repeat="company in Companies | filter:testCompanyForEmail('[email protected]')">

edited Apr 30, 2016 at 21:36

answered Apr 30, 2016 at 19:39

Matthew Haugen

13.4k5 gold badges41 silver badges55 bronze badges

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

3 Comments

Jordash Over a year ago

how would I pass a dynamic email in as a parameter, in the filter you don't have any parameters being passed through?

Jordash Over a year ago

Ok that worked, I ran into another problem, I need to pass the company object in as a parameter (I can pass other parameters into the function but when I try and pass company in it goes in as undefined)

Matthew Haugen Over a year ago

@Jordash company isn't defined until after the filter executes. It gets passed to whatever function you pass to the filter. That's why my second implementation is a function that returns a function.

Collectives™ on Stack Overflow

How to check if a sub-array of objects contains string in Angular Filter

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related