使用来自控制器 js 代码的分层 json 对象应用 Angular 过滤器答案

【问题标题】：Applying Angular Filter with hierarchical json object from controller js code使用来自控制器 js 代码的分层 json 对象应用 Angular 过滤器
【发布时间】：2017-07-01 04:51:18
【问题描述】：

我是 Angualar js 和 json 以及前端开发的新手。所以请原谅我的无知。我想根据属性过滤 json 对象：值。它不包含数组。并且属性：值始终处于第二级。它是分层 json 而不是数组（父->子->再次子。）。我见过同一个问题的变体，但其中大多数都在处理数组。下面是我的示例 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 : 'Y'，那么我想将它添加到我的最终对象中。

这是否可以使用 Angular 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 文件中的过滤器。任何帮助表示赞赏。

【问题讨论】：

标签： javascript angularjs json

【解决方案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}} 应用过滤器。

您可以运行代码 sn-p 来查看它的实际效果。

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>

希望对你有帮助

【讨论】：

运行此程序时出现错误：{ "message": "Uncaught ReferenceError: angular is not defined", "filename": "stacksnippets.net/js", "lineno": 33, "colno": 19 }