$filter with custom function in angular

Question

How I can create a $filter with custom function to determining if match ?

This is a json sample with structure:

     $scope.routes =[
    {
        "id": 0,
        "name": "Rosa Barnes",
        "origin": [
            {
                "address": [
                    {
                        "locality": "Madrid",
                        "country": "ES"
                    }
                ]
            }
        ]
    },
    {
        "id": 1,
        "name": "Wright Montoya",
        "origin": [
            {
                "address": [
                    {
                        "locality": "London",
                        "country": "UK"
                    }
                ]
            }
        ]
    },
    {
        "id": 2,
        "name": "Pearson Johns",
        "origin": [
            {
                "address": [
                    {
                        "locality": "London",
                        "country": "UK"
                    }
                ]
            }
        ]
    }
];

I want a $filter that passing one country, match in origin.address.country , is possible?

I proved this code but not works:

       $scope.routesToShow = $filter('filter')($scope.routes, {origin.address.country: "UK"});

Here there are a demo: http://jsfiddle.net/86U29/43/

Thanks

Brian Lewis · Accepted Answer · 2014-04-30 16:26:30Z

What you need is a custom filter. It also looks like you might need to tweak your data structure too.

Take a look at this:

app.filter('CustomFilter', function () {
    function parseString(propertyString) {
        return propertyString.split(".");
    }

    function getValue(element, propertyArray) {
        var value = element;
        propertyArray.forEach(function (property) {
            value = value[property];
        });
        return value;
    }

    return function (input, propertyString, target) {
        var properties = parseString(propertyString);
        return input.filter(function (item) {
            return getValue(item, properties) == target;
        });
    }
});

You could use this filter, like this:

$scope.routesToShow = $filter('CustomFilter')($scope.routes, 'origin.address.country', 'UK');

Here is an updated jsfiddle (notice the updated data structure): http://jsfiddle.net/moderndegree/86U29/44/

You can find more information on creating custom filters here: https://docs.angularjs.org/guide/filter#creating-custom-filters

Andy Ecca · Accepted Answer · 2014-04-30 16:33:58Z

0

Simply.

var filter = function(obj){
   return obj.origin[0].address[0].country === 'UK';
}
$scope.routesToShow = $filter('filter')($scope.routes, filter);

answered Apr 30, 2014 at 16:33

Andy Ecca

1,98914 silver badges14 bronze badges

2 Comments

Brian Lewis Over a year ago

this solution would be even better if you could iterate over origins and addresses.

Marc Morales Valldepérez Over a year ago

And How I can pass parameter to filter function, If I want pass country with paramater: 'Uk' or 'ES' for example. Thanks!

Collectives™ on Stack Overflow

$filter with custom function in angular

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related