過濾嵌套的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