angular filter duplicating array

Question

i'm having a problem with my angular code.

I'm trying to filter and array using angular filter service but when i get to filtering the array in the filter it duplicates instead of taking each element in the array, i have tried track by but it does not seem to be working.

Here is my angular code:

.filter('priceRange', function() {
        return function(arr, range) {
            if (!range) {return arr; }
            var priceResult = [];
            var pRange = range.split('-');
            angular.forEach(arr, function(key, index) {
                if (key.pPice >= pRange[0] && key.Price <= pRange[1]) {
                    priceResult.push(key);
                }
            })
            console.log(arr);
            return priceResult;
        }
    })

Here is my html sep up:

<div class="col s12 m3" ng-repeat="car in [1,2,3,4,5] | priceRange" >
</div>

when i console.log the array in the filter section i get :

 [1, 2, 3, 4, 5]    rentTatu.js (line 66)
 [1, 2, 3, 4, 5]    rentTatu.js (line 66)
 [1, 2, 3, 4, 5]    rentTatu.js (line 66)
 [1, 2, 3, 4, 5]    rentTatu.js (line 66)
 [1, 2, 3, 4, 5]    rentTatu.js (line 66)

when i try that with a different array i still get duplicates of the array five tims

Please check this line- key.pPice >= pRange[0] && key.Price <= pRange[1] , it has wrong variable name key.Price, it should be key.pPrice. — Shailendra Singh Deol
– Shailendra Singh Deol, Commented Mar 7, 2016 at 11:20
@ Shailendra Singh Deol thanks that is the answer was just a stupid spelling mistake... — John Muchoki
– John Muchoki, Commented Mar 7, 2016 at 13:13

rraman · Accepted Answer · 2016-03-07 12:43:34Z

1

The filter takes a parameter range which is not set when the filter is called. The html should be like,

<div class="col s12 m3" ng-repeat="car in [1,2,3,4,5] | priceRange: range" >

where range is the input to the parameter in the filter. The line after the if loop will not be executed unless you pass the parameter.

answered Mar 7, 2016 at 12:43

rraman

2162 silver badges10 bronze badges

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

Comments

Theo Itzaris · Accepted Answer · 2016-03-07 10:20:12Z

1

Hello it seems to me that range value is empty or null, so the whole array is returned , each time it goes to execute the filter , that's why you get the array five times.

What is the value of 'range' variable?

answered Mar 7, 2016 at 10:20

Theo Itzaris

4,7067 gold badges44 silver badges77 bronze badges

3 Comments

John Muchoki Over a year ago

hi,thanks for the reply,the range value is a select tag that has a range of prices in each option. But i dont think that is the problem because i console.loged the array and the filter duplicated the array five time instead of filtering it

Theo Itzaris Over a year ago

Have you tried console.log('range'); into your filter? After that line : if (!range) {return arr; }

John Muchoki Over a year ago

Yes,it returns the option value selected ,such as 0-4000

Collectives™ on Stack Overflow

angular filter duplicating array

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related