Creating custom angular filters

Question

i have a json of items and a barcode scanner, the barcode scanner inputs directly into my app.

Now the items have a primary part number and a secondary part number, more often than not the result from the barcode scanner will be the primary part number, but i have to check with both to be sure.

I'm trying to implement a custom filter to do this, but it doesn't seem to be working, can anyone maybe let me know what i'm doing wrong ?

 storeApp.filter('barcodeScanner', function() {
                return function(parts, barcode) {
                   angular.forEach(parts, function (vals, key) {
                       if( !angular.isUndefined(vals.Part_Number) && vals.Part_Number !== null  )
                            if (angular.equals(vals.Part_Number,barcode)) 
                                return parts[key];
                   });
                   angular.forEach(parts, function(vals, key) {
                        if ( !angular.isUndefined(vals.Other_Part_Number) && vals.Other_Part_Number !== null )
                            if (angular.equals(vals.Other_Part_Number,barcode)) 
                                return parts[key];
                   });
                };
            });

i then call the filter later in the controller,

$scope.addItemToCart = function() {
                   $scope.shoppingCart.push($filter('barcodeScanner')($scope.parts, $scope.ItemToAdd));
                   console.log($scope.Cart.itemToAdd);
                   console.log($filter('barcodeScanner')($scope.parts, $scope.Cart.itemToAdd));
                   $scope.Cart.itemToAdd = "";
                   console.log($scope.shoppingCart);
                };

however the result from the filter keeps returning undefined. i know for a fact that the entry i want does exist, because when i use a normal $filter('filter') it works fine, but i cannot risk such a widespread filter for my app.

thanks for any help :)

jamie · Accepted Answer · 2015-02-17 06:34:47Z

1

I believe the problem lies in the forEach part of your function. A forEach function does not return a value. You are returning a value to your iterator function and since the forEach is not returning that returned value from the iterator then you will have nothing to push in your $scope.shoppingCart.push($filter('barcodeScanner')($scope.parts, $scope.ItemToAdd));

Saving to a variable ie. matchedPart declared inside the anonymous factory(wrapper) function and returning it outside of the forEach function should solve the undefined:

 storeApp.filter('barcodeScanner', function() {
            return function(parts, barcode) {

                // declare a variable here
                   var matchedPart;

               angular.forEach(parts, function (vals, key) {
                   if( !angular.isUndefined(vals.Part_Number) && vals.Part_Number !== null  )
                        if (angular.equals(vals.Part_Number,barcode)) 
                           // save it to new variable  
                           matchedPart = parts[key];
               });
               angular.forEach(parts, function(vals, key) {
                    if ( !angular.isUndefined(vals.Other_Part_Number) && vals.Other_Part_Number !== null )
                        if (angular.equals(vals.Other_Part_Number,barcode)) 
                            // save it to new variable  
                           matchedPart = parts[key];
               });
                  // return it outside the forEach function  
                  return matchedPart;
            };
        });

last note: I would also think you should refactor by combining your forEach functions. Not have 2 separate ones. Combining your isUndefined check with !angular.isUndefined(vals.Part_Number) && !angular.isUndefined(vals.Other_Part_Number) && vals.Part_Number...

edited Feb 17, 2015 at 6:34

answered Feb 17, 2015 at 6:04

jamie

6907 silver badges18 bronze badges

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

1 Comment

Sean Bugeja Over a year ago

Aaa was not aware about not being able to return from within a forEach, my reasoning behind separating them was that since it's much more common that the match will be with the primary part number, i could exit the function more quickly for most parts, but since the return doesn't work in the iterator, then combining them makes more sense, thanks :)

Pankaj Parkar · Accepted Answer · 2015-02-16 19:30:05Z

1

Instead of .equals you need to check == because string will not exactly equal to number

angular.equals is nothing but strongly check in javascript === which check both values are equal with their type or not.

if(angular.equals(vals.Other_Part_Number,barcode))

Changed to

if(vals.Other_Part_Number == barcode)

If you want to strictly check then you need to convert both the value to number using parseInt and then check

if(angular.equals(parseInt(vals.Other_Part_Number),parseInt(barcode)))

Hope this could help you. Thanks.

edited Feb 16, 2015 at 19:30

answered Feb 16, 2015 at 19:24

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

1 Comment

Sean Bugeja Over a year ago

thanks for the info, but the part numbers are actually stored as strings so this actually works fine :)

Collectives™ on Stack Overflow

Creating custom angular filters

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related