Angular multiple filter, second filter is empty?

Question

I have an ng-repeat (jade):

.col-lg-4.col-md-4.col-sm-6.col-xs-12.product.product-grid(ng-repeat='item in collection | product_sex:filter_sex | product_stock:stockKind')

In my app.js I have two filters:

.filter('product_sex', function(){
    return function(input, sex){

        if(input == undefined){
            input = [];
        }
        var output = [];

        if(sex == 'undefined' || sex =='all'){
            output = input;
        }

            for(var i =0; i < input.length; i++){
                var item = input[i];

                if (item.product.sex == sex){
                    output.push(item);
                }
            }


        return output;
    }
})
.filter('product_stock', function(){
    return function(input, stockKind){

        if(input == 'undefined'){
            input = [];
        }

        var output = [];

        if (stockKind == 'undefined' || stockKind == 'all'){
            output = input;
        }

            for(var i=0; i< input.length; i++){
                var item = input[i];

                if(item.stock < 0 && item.status != 'Niet leverbaar' && stockKind == 'online'){
                    output.push(item);
                }else if(item.stock > 0 && item.status != 'Niet leverbaar' && stockKind =='fysiek'){
                    output.push(item);
                }
            }


    }
})

I want to apply both filters to my ng-repeat. The first filter works fine, but when I add the second filter (as in the example) it will return nothing. The angular error logs says TypeError: Cannot read property 'length' of undefined for the for loop in the product_stock filter. I can't see what i'm doing wrong, so I'am wondering if you can help me again?

In my controller I fill $scope.stockKind and $scope.filter_sex with 'all'. Later i make it possible to change the value of that when clicking on a link, like ng-click='stockKind="online"'

Debug your code and check what's inside `input` in your `product_stock` filter — Weedoze, Aug 23 '16 at 08:01

score 2 · Accepted Answer · answered Aug 23 '16 at 08:04

2

Your error is in the following part of the code

if(input == 'undefined'){
    input = [];
}

You should replace it by

if(input == null){
    input = [];
}

OR

if(input === undefined || input === null){
    input = [];
}

Both are exactly the same

answered Aug 23 '16 at 08:04

Weedoze

13,683
1
33
63

Are you sure that the OP expected the `undefined` "value" and not the string `'undefined'`? – C.Champagne Aug 23 '16 at 08:48
Furthermore `undefined`is not a keyword. To test it, you'd better use the following test : `typeof === 'undefined'`. See http://stackoverflow.com/a/3550319/1153988 – C.Champagne Aug 23 '16 at 08:54
Not sure but he did it for the other filter – Weedoze Aug 23 '16 at 08:54
...or more simply `if(!input)` – C.Champagne Aug 23 '16 at 08:55
Yes, he does the following test `if(sex == 'undefined' || sex =='all')` so I presume that 'undefined' and 'all' are the possible values of `sex` as 'male' and 'female' certainly are. – C.Champagne Aug 23 '16 at 08:58

Angular multiple filter, second filter is empty?

1 Answers1