Angular - Filter on nested objects

Question

I have an array of JSON objects that is being filtered by a search. In the search, I have the ng-model on the search set to search.$, but it only searches through the top part of each of the objects, but I need to to search all the objects nested inside of the objects. Is there an easy way to do that in Angular?

Answer 1

It is possible using a custom recursive filter function (for docs, see https://docs.angularjs.org/api/ng/filter/filter), the following example illustrates it:

angular.module('deepFilterTestApp', [])

  .filter('deepFilter', function($filter) {
     return function(text) {
       return function (value) {
            var searchTerm = text;
            if (angular.isObject(value)) {
                var found = false;
                angular.forEach(value, function(v,k) {
                    found = found || $filter('deepFilter')(searchTerm)(v);
                });
                return found;

            } else if (angular.isString(value)) {
                if (value.indexOf(searchTerm) !== -1) {
                    return true;
                } else {
                    return false;
                }
            }
        };
     };
  })

  .controller('DeepFilterTestController', function ($scope) {
  
         $scope.myArray = [
            {
                property1: {
                    deepProperty1: "deeepppp 1!!"
                },
                property2: {
                    deepProperty2: "deeep 2!!"
                }
            },
            {
                property1: {
                    deepProperty1: "dooop 1!!"
                },
                property2: {
                    deepProperty2: {
                        evenDeeperProperty1: "deeepest 2!!"
                    }
                }
            }
        ];

        
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="deepFilterTestApp" ng-controller="DeepFilterTestController">
   
  <p>"dooop": {{ myArray | filter : ('dooop'|deepFilter) }}</p>
  <p>"deeep": {{ myArray | filter : ('deeep'|deepFilter) }}</p>
  <p>"deeepppp": {{ myArray | filter : ('deeepppp'|deepFilter) }}</p>
  <p>"deeepest": {{ myArray | filter : ('deeepest'|deepFilter) }}</p>
  
</div>