过滤嵌套的JSON数据Angularjs

Question

我检查这个plunker： Plunker：http://plnkr.co/edit/5E7FYqNNqDuqFBlyDqRh?p=preview

它为我在一定程度上。但我的问题是我有一个嵌套的JSON数据。上述过滤器代码不起作用的地方。以下是我基于“category_id”键筛选的json数据。

JSON ::

[{ 
"category_id": 5, 
"category_name": "Home", 
"image": "Home_544f75960ee0e", 
"parent_id": 0, 
"i": 1, 
"categories": [ 
    { 
    "category_id": 7, 
    "category_name": "Home Safe", 
    "image": "Home Safe_5411af45ac923", 
    "parent_id": 5, 
    "i": 2, 
    "categories": [ 
     { 
     "category_id": 13, 
     "category_name": "Mechanical Safes ", 
     "image": "Mechanical Safes _540ab92ee1ff7", 
     "parent_id": 7, 
     "i": 3 
     }, 
     { 
     "category_id": 14, 
     "category_name": "Electronic Safes ", 
     "image": "Electronic Safes _540ab93c6e305", 
     "parent_id": 7, 
     "i": 4 
     } 
    ] 
    }, 
    { 
    "category_id": 8, 
    "category_name": "Video Door Phones ", 
    "image": "Video Door Phones _540ab57a466ff", 
    "parent_id": 5, 
    "i": 3 
    }, 
    { 
    "category_id": 9, 
    "category_name": "Alarm Systems ", 
    "image": "Alarm Systems _540ab58b903e9", 
    "parent_id": 5, 
    "i": 4 
    }, 
    { 
    "category_id": 10, 
    "category_name": "Home CCTV Cameras ", 
    "image": "Home CCTV Cameras _540ab59c59f44", 
    "parent_id": 5, 
    "i": 5 
    }, 
    { 
    "category_id": 11, 
    "category_name": "Car Safes ", 
    "image": "Car Safes _540ab5b0dcc57", 
    "parent_id": 5, 
    "i": 6 
    }, 
    { 
    "category_id": 12, 
    "category_name": "Hotel Safes ", 
    "image": "Hotel Safes _540ab5bddae51", 
    "parent_id": 5, 
    "i": 7 
    } 
]},{ 
"category_id": 6, 
"category_name": "Institution", 
"image": "Institution_541304aa0a52d", 
"parent_id": 0, 
"i": 2, 
"categories": [ 
    { 
    "category_id": 15, 
    "category_name": "Physical Security Products ", 
    "image": "Physical Security Products _54130515e2cb3", 
    "parent_id": 6, 
    "i": 3, 
    "categories": [ 
     { 
     "category_id": 18, 
     "category_name": "Record Protecting Equipment ", 
     "image": "Record Protecting Equipment _541305cb5f47a", 
     "parent_id": 15, 
     "i": 4 
     }, 
     { 
     "category_id": 19, 
     "category_name": "Burglary and Fire Resistant Safes", 
     "image": "Burglary and Fire Resistant Safes_541305db69acf", 
     "parent_id": 15, 
     "i": 5 
     }, 
     { 
     "category_id": 20, 
     "category_name": "Vault Equipment ", 
     "image": "Vault Equipment _541305e8d905c", 
     "parent_id": 15, 
     "i": 6 
     }, 
     { 
     "category_id": 21, 
     "category_name": "Vault Accessories", 
     "image": "Vault Accessories_541305f6ed3a4", 
     "parent_id": 15, 
     "i": 7 
     } 
    ] 
    }, 
    { 
    "category_id": 16, 
    "category_name": "Premises Security Solutions ", 
    "image": "Premises Security Solutions _54130525074c9", 
    "parent_id": 6, 
    "i": 4 
    }, 
    { 
    "category_id": 17, 
    "category_name": "Marine Solutions ", 
    "image": "Marine Solutions _54130530a10da", 
    "parent_id": 6, 
    "i": 5 
    } 
]}] 

我在这里能够过滤 “CATEGORY_ID”= 5，但不能过滤 “CATEGORY_ID”= 7

@josep以下是我的代码：

var categoriesdata = $filter('filter')($rootScope.catjsondata, {category_id:$stateParams.categoryId})[0]; 

这里$ rootscope.catjsondata包含嵌套的json数据。 $ stateparams.categoryId将为我提供在列表中单击的对象的category_id。所以每次id都会改变。它没有硬编码。这些值是动态的。

以下是我的控制器代码：

.controller('SubCategoriesCtrl', function($scope, $filter, $stateParams, $ionicNavBarDelegate, subcategoriesfactory, globalurlfactory, $rootScope) { 
$scope.baseUrl = globalurlfactory; 
console.log("$rootScope.catjsondata :: ", $rootScope.catjsondata); 
console.log("$stateParams.categoryId :: ", $stateParams.categoryId);  

var categoriesdata = $filter('filter')($rootScope.catjsondata, {category_id:$stateParams.categoryId})[0]; 

console.log("categoriesdata ::::: ", categoriesdata); 
    //$rootScope.catjsondata = categoriesdata; 
    $scope.categoryTitle = categoriesdata.category_name; 
    $scope.categoriesIn = categoriesdata.cats_in; 
    $scope.categories = categoriesdata.categories; 
    $scope.has_product = categoriesdata.has_product; 

    if(categoriesdata.has_product == "yes") 
    { 
     $scope.categoryTitle = categoriesdata.category_name; 
     $scope.products = categoriesdata.product; 
    } 


$scope.goBack = function(){ 
    $scope.isBack = true; 
    $ionicNavBarDelegate.back(); 
}}) 

Answer 1

至于其他提到的，因为在这种支持没有内置（据我所知）而且你不知道树的深度，你必须递归地（或迭代地，递归地更简单）找到它。 这里是一个更新的plunker： http://plnkr.co/edit/sFaBnCnhXzx08pVX5qXe?p=preview

而且关键功能连接为别人（这只是一个简单的递归通过表达式查找元素）：

.filter('recursiveExpression', function($filter) { 
    return function(input, exp) { 
     return recursivelyFilterExpression(input, exp); 
    } 

    function recursivelyFilterExpression(input, exp) { 
     var filterResult = $filter('filter')(input, exp); 
     // Any result? 
     if (filterResult.length > 0) { 
      return filterResult[0]; 
     } 

     if (angular.isArray(input) || angular.isObject(input)) { 
      for (var key in input) { 
       if (angular.isArray(input[key]) || angular.isObject(input[key])) { 
        var internalResult = recursivelyFilterExpression(input[key], exp); 
        if (internalResult) { 
         return internalResult; 
        } 
       } 
      } 
     } 

     return null; 
    } 
    }); 

**确保表达评估成本并不高，在这种情况下，这样做不够充分。

Answer 2

我认为你需要在categories迭代，因为它们是嵌套在其他里面。

我改变了你的plunkr中的json来模拟你的真正的json。
看看this one。

现在还没有其他的东西出现在我的脑海里。

- 编辑

好吧，这是工作plunkr与JSON：plunkr