Custom filter function cannot call method of undefined

Question

Here is the simple scenario of an Angularjs filter in template:

<input ng-model="query">         
<li ng-repeat="item in filtered = (prosItems.results |filter:mySearch)">

Because I need to filter on specific fields only from prosItems.results, i created in the controller a specific function:

$scope.mySearch = function (item){
            if ($scope.query) {
                var searchTerm = $scope.query.toLocaleLowerCase();
                return item.firstName.toLowerCase().indexOf(searchTerm)!==-1 ||
                    item.lastName.toLowerCase().indexOf(searchTerm)!==-1 ||
                    item.company.toLowerCase().indexOf(searchTerm)!==-1 ||
                    item.city.toLowerCase().indexOf(searchTerm)!==-1   ||
                    item.state.toLowerCase().indexOf(searchTerm)!==-1    ||
                    item.country.toLowerCase().indexOf(searchTerm)!==-1;
            } else {
                return true;
            }
        };

Problem is when any property of an iteration is undefined, for example if user hasn't specified a "company" on an entry, I will get that error as soon as I type something in the input field:

Cannot call method 'toLowerCase' of undefined

I could imagine solution if I had only one property to iterate trough, but since i have several, I don't see practical way of doing so. Do you see any way to solve this issue practically ?

Jonathan Rowny · Accepted Answer · 2014-01-30 16:53:15Z

2

what about something like this:

var fields = ['firstName', 'lastName', 'company', 'etc'];
for(var i = 0, l = fields.length; i < l; i ++){
   if(item[fields[i]] && item[fields[i]].toLowerCase().indexOf(searchTerm)!==-1){
       return true;
   }
}
return false;

edited Jan 30, 2014 at 16:53

answered Jan 30, 2014 at 16:39

Jonathan Rowny

7,5981 gold badge21 silver badges26 bronze badges

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

6 Comments

Gruff Bunny Over a year ago

Nice. Could even remove the hasMatch variable and replace with 'return true' or 'return false' as appropriate.

Robert Brax Over a year ago

that seems to do the job also tks

Jonathan Rowny Over a year ago

@GruffBunny yea, good point. Some linter I was using in another language... ActionScript maybe? Was always yelling at me not to return from inside a loop. I forget why.

Robert Brax Over a year ago

works like a charm, but a general question: the "return true" returns a boolean for each matching case, or the corresponding items themselves ?

Jonathan Rowny Over a year ago

The filter only needs to return true once, if any of the conditions are met. So as soon as it hits "return true;" the loop will stop and the function is done.

|

Robert Brax · Accepted Answer · 2014-01-30 16:48:32Z

0

I tried dead simple:

$scope.mySearch = function (item){
            if ($scope.query) {
                var searchTerm = $scope.query.toLocaleLowerCase();
                var  city = item.city || 'null',
                    state = item.state ||  'null',
                    company = item.company || 'null',
                    country = item.country || 'null';
                return item.firstName.toLowerCase().indexOf(searchTerm)!==-1 ||
                    item.lastName.toLowerCase().indexOf(searchTerm)!==-1 ||
                    company.toLowerCase().indexOf(searchTerm)!==-1 ||
                    city.toLowerCase().indexOf(searchTerm)!==-1 ||
                    state.toLowerCase().indexOf(searchTerm)!==-1 ||
                    country.toLowerCase().indexOf(searchTerm)!==-1;
            } else {
                return true;
            }
        };

seems to do the job, but is it good practice ?

answered Jan 30, 2014 at 16:48

Robert Brax

7,48812 gold badges46 silver badges77 bronze badges

1 Comment

Jonathan Rowny Over a year ago

No, for a few reasons. What if someone searches for things starting with "nu"... 'null'.indexOf('nu') would return 0... or anything with 'll' etc.

Collectives™ on Stack Overflow

Custom filter function cannot call method of undefined

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related