Search and filter through deep json value with Angular $filter

Question

This is a sample Json that I am using to render in my html using Angular's ng-repeat directive.

[
  {
    "id": "10.0.0.208",
    "ip_address": "10.0.0.208",
    "username": "root",
    "password": "--invalid secret key--",
    "ports": [
      8056,
      8057
    ],
    "installations": 2,
    "created": "2016-07-15 17:41:36",
    "wanpipe": {
      "wp1": {
        "port": 8056,
        "physical": true,
        "signalling": true,
        "outgoing": true,
        "hangup_cause": "NORMAL_CLEARING",
        "outgoing_caller_id": "1409716078"
      },
      "wp2": {
        "port": 8056,
        "physical": true,
        "signalling": true,
        "outgoing": true,
        "hangup_cause": "NORMAL_CLEARING",
        "outgoing_caller_id": "1409716077"
      },
      "wp3": {
        "port": 8056,
        "physical": true,
        "signalling": true,
        "outgoing": true,
        "hangup_cause": NORMAL_CLEARING","outgoing_caller_id":"1409716077"
  }
]

I made a search bar in HTML by calling an angular filter on the attribute ip_address, which is as follows. It works and returns to me a filtered array called pagedItems which I can reiterate again using ng-repeat.

$scope.figureOutIPToDisplay = function(searchIP) {
        console.log(searchIP);
        $scope.filteredItems = $filter('filter')($scope.json.json, {
            ip_address : $scope.searchIP
        });

        $scope.pagedItems = $scope.filteredItems;
        console.log($scope.pagedItems);

    };

The following is the HTML code,

<div class="row"  ng-repeat=" init in pagedItems  ">
 <div ng-repeat="(key,wanpipe) in init.wanpipe" class=" col-lg-1 col-md-1 col-sm-4 col-xs-4  ">
                                        <button popover-trigger="focus" uib-popover-template="templateUrl" ng-if="wanpipe.physical==true"type="button" class="btn btn-primary" >{{key}}</button>

                                        <button popover-trigger="focus"  uib-popover-template="templateUrl" ng-if="wanpipe.physical==false" type="button" class="btn btn-danger">{{key}}</button>

                                        <script type="text/ng-template" id="myPopoverTemplate.html">
                                            <div class="row ipAddressdetails">
                                                <div class="col-lg-12 col-md-12 text-center">
                                                    <span class="glyphicon glyphicon-random"></span> Port: {{wanpipe.port}}
                                                </div>
                                            </div>
                                            <div class="row ipAddressdetails">
                                                <div class="col-lg-12 col-md-12 text-center">
                                                    <span class="glyphicon glyphicon-time"></span> Physical: {{wanpipe.physical}}
                                                </div>
</div>

However in the aforementioned Json, I also tried to filter it on the basis of the port attribute which is a part of the wanpipe object, which in turn consists of other objects, namely wp1, wp2,wp3, etc having the port attribute. I have tried a lot of things to make it work but have failed miserable, any help would be greatly appreciated.

Answer 1

In order to do deep filter, you use $ sign instead of the actual property name. So if you want to deep search on all properties in your object you can use

From angularjs documentation:

Note that a named property will match properties on the same level only, while the special $ property will match properties on the same level or deeper. E.g. an array item like {name: {first: 'John', last: 'Doe'}} will not be matched by {name: 'John'}, but will be matched by {$: 'John'}

 $scope.filteredItems = $filter('filter')($scope.json.json, {
            $: $scope.searchIP
        });

However in the aforementioned Json, I also tried to filter it on the basis of the port attribute which is a part of the wanpipe object, which in turn consists of other objects, namely wp1, wp2,wp3, etc having the port attribute.

This might work for your scenario. This will look into only wanpipe property.

 $scope.filteredItems = $filter('filter')($scope.json.json, {
            wanpipe: {$: $scope.searchIP} 
        });