2017-02-13 10 views
0

私はAngualar jsとjsonとfrontend dev.so plsを初めて使っています。私の無知を許しています。プロパティ:valueに基づいてjsonオブジェクトをフィルターしたかったのです。 配列を含んでいません。 property:valueは常に2番目のレベルにあります。配列ではなく、階層的なjsonです(parent-> children-> again children)。 私は同じ質問の変種を見ましたが、そのほとんどは配列を扱っています。下の は私のサンプルjsonです。コントローラーjsコードの階層型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'の場合は、最終的なオブジェクトに追加します。

これは角度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ファイルのフィルターを使用しています。 助けていただければ幸いです。ここで

答えて

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}}を実行します。

コードスニペットを実行すると、実際の動作を確認できます。 { "メッセージ": "キャッチされないにReferenceError:角度が定義されていない"、 "ファイル名":「httpsの

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>
は、それがこれを実行しているエラーを取得

+0

役に立てば幸い: //stacksnippets.net/js "、 " lineno ":33、 " colno ":19 } – otc

関連する問題