angularjs filtering a deep json object

Question

I have a data in following format:

{
  "A": {
    "P": {
      "Age": {
        "keyName": "Repo1",
        "checked": false
      },
      "Gender": {
        "keyName": "Repo2",
        "checked": false
      }
    }
  },
  "S": {
    "D": {
      "keyName": "Repo3",
      "checked": false
    },
    "W": {
      "keyName": "Repo4",
      "checked": false
    }
  }
}

HTML:

<div ng-controller="MyController">
  <ul>
     <li ng-repeat="kName in keyNames">
      <input type="checkbox" value="{{kName.keyName}}" ng-click="selectedKeyNames($event, kName)"> {{kName.keyName}}
      </li>
  </ul>

  <pre>{{tempData | json}}</pre>
</div>

JS:

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

myApp.controller('MyController',["$scope","$filter", function ($scope, $filter) {

  $scope.tempData = {"A":{"P":{"Age":{"keyName":"Repo1","checked":false},"Gender":{"keyName":"Repo2","checked":false}}},"S":{"D":{"keyName":"Repo3","checked":false},"W":{"keyName":"Repo4","checked":false}}};

$scope.keyNames = $filter("buildKeyMap")($scope.tempData);

$scope.selectedKeyNames = function(e, rpt){
  $scope.findNode($scope.tempData, "keyName", rpt.keyName, $(e.target).is(":checked"));

};

        $scope.findNode = function(obj, key, val, isChecked) {
            var objects = [];
            for (var i in obj) {
                if (!obj.hasOwnProperty(i)) continue;
                if (typeof obj[i] == 'object') {
                    objects = objects.concat($scope.findNode(obj[i], key, val, isChecked));
                } else if (i == key && obj[key] && obj[key] == val) {
                    obj.checked = isChecked;
                    $scope.foundObject = obj;
                    break;
                }
            }
            return $scope.foundObject;
        };

}]).filter("buildKeyMap",function(){
        return function(items){
            var options = []
            var recursiveFilter = function(items){
                angular.forEach(items, function(item, parentKey){
                    if(item.hasOwnProperty("keyName")){
                        options.push({"keyName": item.keyName});
                    }else{
                        recursiveFilter(item);
                    }
                });
            };
            recursiveFilter(items);
            return options;
        };
    });

And i want to filter only those nodes which have checked = true. And it should be in same json structure. I have done the checked = true but i am unable to delete or add the node from the json.

here is the fiddle: http://jsfiddle.net/qsp4dwsd/5/ which sets checked = true but the json remains the same in case of false or true

Answer 1

I can help more with exactly how to do this so feel free to message me, but the short answer is in this great package of filters:

https://github.com/a8m/angular-filter#filterby

Filter by helps with exactly what you are trying to do, however I suggest converting your top level object into an array first.

collection | filterBy: [prop, nested.prop, etc..]: search: strict[optional]

Hope this helps.

Answer 2

Here I have created working demo .

Overall Changes:

• Defined ng-model for checkbox
• Defined variable OrginalData
• Changed selectedKeyNames method
• Changed findNode method

HTML

<div ng-controller="MyController">
  <ul>
     <li ng-repeat="kName in keyNames">
      <input type="checkbox" ng-model="kName.checked" value="{{kName.keyName}}" ng-click="selectedKeyNames()"> {{kName.keyName}}
      </li>
  </ul>

  <pre>{{tempData | json}}</pre>
</div>

JS

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

myApp.controller('MyController',["$scope","$filter", function ($scope, $filter) {      

var OriginalData ={"A":{"P":{"Age":{"keyName":"Repo1","checked":false},"Gender":{"keyName":"Repo2","checked":false}}},"S":{"D":{"keyName":"Repo3","checked":false},"W":{"keyName":"Repo4","checked":false}}}

$scope.tempData = $.extend(true, {}, OriginalData);

$scope.keyNames = $filter("buildKeyMap")($scope.tempData);

$scope.selectedKeyNames = function(e, rpt){ 
  $scope.tempData = $.extend(true, {}, OriginalData);
  for(var kName in $scope.keyNames){
   $scope.findNode($scope.tempData, "keyName", $scope.keyNames[kName].keyName, $scope.keyNames[kName].checked); 
   }
};

        $scope.findNode = function(obj, key, val, isChecked) { 
            for (var i in obj) {
                if (!obj.hasOwnProperty(i)) continue;
                if (typeof obj[i] == 'object') {
                $scope.findNode(obj[i], key, val, isChecked);
                } 
                else if (i == key && obj[key] && obj[key] == val)                               {                   
                        if(!isChecked) {
                        delete obj[i];
                      delete obj["checked"];
                     }
                    else
                        obj.checked = isChecked;
                    break;
                }
            }               
        };

}]).filter("buildKeyMap",function(){
        return function(items){
            var options = []
            var recursiveFilter = function(items){
                angular.forEach(items, function(item, parentKey){
                    if(item.hasOwnProperty("keyName")){
                        options.push({"keyName": item.keyName});
                    }else{
                        recursiveFilter(item);
                    }
                });
            };
            recursiveFilter(items);
            return options;
        };
    });