CODEWITHSUNDEEP
javascriptangularjsjson
Arvin_Sebastian
Arvin_Sebastian

Reputation: 1194

Applying Angular Filter with hierarchical json object from controller js code

I am new to Angualar js and json and frontend dev.so pls forgive my ignorance.I wanted to filter a json object based on a property:value. it doesn't contain arrays. and the property:value is always at the second level.its a hierarchical json not an array(parent->children->again children.). I have seen variants of the same question but most of them are dealing with array. below is my sample json.

            {
         "key1":
         {
         "prop11": "value11",
         "prop2" : "N",
         "prop13" : "value13" 
         },
         "key2":
         {
         "prop21": "value21",
         "prop2" : "Y",
         "prop33" : "value23" 
         },
          "key3":
         {
         "prop31": "value11", 
         "prop33" : "value13",
         "prop2" : "N",
         },
         "key4":
         {
         "prop41": "value21",
         "prop2" : "Y",
         "prop43" : "value23" 
         },
         .
         .
         .
         .

        }

I want to filter all children into a json object based on the value of prop2. that is, if prop2 : 'Y', then I want to add it to my final object.

Is this posible using angular js filter. I tried below sample but couldn't get desired results.

$filter('filter')(JSON.parse(jsonString),JSON.parse("{ \"Mandatory\":\"Y\"}"))

or
$filter('filter')(JSON.parse(jsonString),JSON.parse("{$:{Mandatory:'y'}}"))

or i tried to covert the sample json string to an array with single object by adding square bracket.

var array = '[ '+ jsonString + ' ]';
$filter('filter')(array,{$:{Mandatory:'y'}});

None of this worked.I am using the filter from the controller js file. Any help appreciated.

Upvotes: 0

Views: 249

Answers (1)

Jax
Jax

Reputation: 1843

Here is a custom filter to help you achieve what you want:

app.filter('myFilter', function() {
  return function(data) {
    newObj = [];
    angular.forEach(data, function(v, k) {
      if(v.prop2 === 'Y') {
        newObj.push(v);
      }
    });
    return newObj;
  }
});

Here is the implementation, I'm just assigning your data to a variable on the $scope then displaying the data and applying the filter by doing {{data | myFilter}}.

You can run the code snippet to see it in action.

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


app.controller('MainCtrl', ['$scope', function($scope) {
  
  
  $scope.data = {
    "key1": {
      "prop11": "value11",
      "prop2": "N",
      "prop13": "value13"
    },
    "key2": {
      "prop21": "value21",
      "prop2": "Y",
      "prop33": "value23"
    },
    "key3": {
      "prop31": "value11",
      "prop33": "value13",
      "prop2": "N",
    },
    "key4": {
      "prop41": "value21",
      "prop2": "Y",
      "prop43": "value23"
    }
  }
  
  
}]);
  
app.filter('myFilter', function() {
  return function(data) {
    newObj = [];
    angular.forEach(data, function(v, k) {
      if(v.prop2 === 'Y') {
        newObj.push(v);
      }
    });
    return newObj;
  }
});
<!DOCTYPE html>
<html ng-app="ngApp">

<head lang="en">
  <meta charset="utf-8">
  <title>maxisam's ngApp</title>
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
</head>

<body ng-controller="MainCtrl" class="container">
  {{data | myFilter}}
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
  <script src="app.js"></script>
</body>

</html>

hope it helps

Upvotes: 1

Related Questions