Filter Array by containment in other array in ng-repeat loop

Question

How can i filter the results of an array based on an other array in ng-repeat.

Array i want to filter:

[
    [
    'gender': 'male',
    'languages': ['German', 'English'],
    'country': 'Marocco'
    ],
    [
    'gender': 'female',
    'languages': ['German', 'French'],
    'country': 'Kosovo'
    ]
]

I want to to filter by this object:

   | filter:{'languages': ['Urdu', 'French'], 'country': ['Kosovo']}

Expected result:

[
'gender': 'female',
'languages': ['German', 'French'],
'country': 'Kosovo'
]

@JSelser Technically you can as you can have arrays of arrays and arrays are objects. — GillesC
– GillesC, Commented Dec 11, 2016 at 13:03
@2ps It may sound counter-intuitive, but your proposed edit actually changes the meaning of the question (and the content of the resulting answers), since part of addressing OP's question involves pointing out the errors. In this case it's best to leave the code in the question as-is. Here is some further reading on how code in questions should and shouldn't be edited: meta.stackoverflow.com/a/260246/2234742 Thanks! — Maximillian Laumeister
– Maximillian Laumeister, Commented Dec 12, 2016 at 2:09

Maximillian Laumeister · Accepted Answer · 2016-12-12 20:15:48Z

Here is an example based on your code. I made some key changes:

Your array of data is an array of objects.
I changed country to a value in your filter object. If you still want it to be an array then just change the code in the custom filter to work like it does for languages.

    var app = angular.module('myApp',[]);

    app.controller('MyCtrl', ['$scope', function($scope) {
        $scope.data= [
            {
                'gender': 'male',
                'languages': ['German', 'English'],
                'country': 'Marocco'
            },
            {
                'gender': 'female',
                'languages': ['German', 'French'],
                'country': 'Kosovo'
            }
        ];
    }]);

    // Custom filter for our objects
    app.filter('myFilter', function () {
        return function (people, filterPerson) {
            var filtered = [];

            // Check if any elements in checkArray are in sourceArray
            var includesAny= function(checkArray,sourceArray){
                checkArray.forEach(function(element) {
                    if (sourceArray.includes(element)){return true;}
                });
                return false;
            };

            for (var i = 0; i < people.length; i++) {
                var person = people[i];
                if (filterPerson.country && filterPerson.country != person.country) {
                    continue;
                }

                if (filterPerson.gender && filterPerson.gender != person.gender) {
                    continue;
                }

                if (filterPerson.languages && includesAny(filterPerson.languages,person.languages)) {
                    continue;
                }

                filtered.push(person);
            }
            return filtered;
        };
    });

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <title>AngularJS Example</title>

    <!-- AngularJS -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>


</head>
<body ng-app="myApp">

<div ng-controller="MyCtrl">
    <h1>Unfiltered Data</h1>
    <ul>
        <li ng-repeat="person in data">
            {{ person }}
        </li>
    </ul>

    <h1>Filtered Data</h1>
    <ul>
        <li ng-repeat="person in data | myFilter:{'languages': ['Urdu', 'French'], 'country': 'Kosovo'}">
            {{ person }}
        </li>
    </ul>
</div>

</body>
</html>

Collectives™ on Stack Overflow

Filter Array by containment in other array in ng-repeat loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related