Question

我是Angualar js和json以及frontend dev.so的新手请原谅我的无知。我想根据属性：value过滤json对象。它不包含数组。和属性：值总是在第二级。层次结构json不是数组（parent-＆gt; children-＆gt;再次是孩子。）。我见过同一个问题的变种，但大多数都处理数组。下面是我的样本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" 
         },
         .
         .
         .
         .

        }

我想根据prop2的值将所有子节点过滤为json对象。也就是说，如果prop2：＆＃39; Y＆＃39;，那么我想将它添加到我的最终对象。

这是否可以使用角度js过滤器。我试过下面的样本，但无法得到理想的结果。

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

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

或者我试图通过添加方括号将样本json字符串转换为具有单个对象的数组。

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

这些都没有用。我正在使用控制器js文件中的过滤器。任何帮助表示赞赏。

Answer 1

这是一个自定义过滤器，可帮助您实现所需目标：

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

以下是实施，我只是将您的数据分配到$scope上的变量，然后显示数据并通过{{data | myFilter}}应用过滤器。

您可以运行代码段以查看其实际效果。

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>

希望有所帮助

将Angular Filter与来自控制器js代码的分层json对象一起应用

1 个答案: