CODEWITHSUNDEEP
javascriptangularjsarraysjson
jhon dano
jhon dano

Reputation: 658

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

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'
]

Upvotes: 0

Views: 101

Answers (1)

Todd Palmer
Todd Palmer

Reputation: 1102

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

  1. Your array of data is an array of objects.

  2. 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>

Upvotes: 1

Related Questions