从控制器应用分层json对象的角度过滤器js代码

问题描述：

我是Angualar js和json以及前端dev.so的新手，请原谅我的无知。我想根据property：value过滤json对象。它不包含数组。而property：value总是处于第二级。它是一个分层json而不是数组（parent-> children-> again children）。我看到了相同问题的变体，但其中大部分都是处理数组。下面的是我的示例json。从控制器应用分层json对象的角度过滤器js代码

  { 
     "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'，那么我想将它添加到我的最终对象。

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

答

这里是一个自定义过滤器，以帮助你实现你想要什么：

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>

希望它有助于

获取运行这样的错误： { “消息”： “未捕获的ReferenceError：角没有定义”， “文件名”：“HTTPS： //stacksnippets.net/js“， ”lineno“：33, ”colno“：19 } – otc

从控制器应用分层json对象的角度过滤器js代码

相关推荐