Filtering nested JSON data based on id Angularjs

Question

I checked this plunker: Plunker: http://plnkr.co/edit/5E7FYqNNqDuqFBlyDqRh?p=preview

It worked for me to some extent. But my issue is i have a nested json data. Where the above filter code is not working. Following is my json data where I am filtering based upon "category_id" key.

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
  }
]}]

here i am able to filter "category_id" = 5 but not able to filter "category_id" = 7

@josep Following is my code :

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

here $rootscope.catjsondata contains the nested json data. $stateparams.categoryId will provide me the category_id of the object clicked in the list. so every time the id will change. Its not hardcoded. the values are dynamic.

Following is my controller code:

.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();
}})

Is it correct (in your logic) to have categories inside categories inside categories? — Denis C de Azevedo
– Denis C de Azevedo, Commented Oct 29, 2014 at 6:06
it is json data just like xml. this has beed provided to me as i am working on project. need to create list of categories which i am getting from "categories" key inside json data. — Niranjan Balkrishna Prajapati
– Niranjan Balkrishna Prajapati, Commented Oct 29, 2014 at 6:07

Tomer · Accepted Answer · 2014-10-29 06:52:18Z

As other mentioned, since there is no built in support for this (as far as I know) and you don't know the tree's depth, you have to recursively (or iteratively, recursively is simpler) find it. Here is an updated plunker: http://plnkr.co/edit/sFaBnCnhXzx08pVX5qXe?p=preview

Also the key function is attached for others (it is just a simple recursion that looks for the element by expression):

.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;
     }
  });

** Make sure the expression is not costly to evaluate, in which case this won't be very so sufficient.

Denis C de Azevedo · Accepted Answer · 2014-10-29 06:57:05Z

1

I think you need to iterate over the categories because they are nested inside the others.

I changed the json from your plunkr to simulate your real json.
Take a look at this one.

Nothing else comes to my mind right now.

-- Edited

Okay, this is the working plunkr with your JSON: plunkr

edited Oct 29, 2014 at 6:57

answered Oct 29, 2014 at 6:32

Denis C de Azevedo

6,3072 gold badges34 silver badges49 bronze badges

6 Comments

Niranjan Balkrishna Prajapati Over a year ago

I checked your plunker the only difference in my json and ur modifed json data is you wrapped the main 2 objects in to results and u filtered on the results bases. will implement your code and let you know.

Denis C de Azevedo Over a year ago

Good luck. I think you got the idea. As it is quite recursive, you'll need to iterate (maybe there's a better solution, I don't know). You may even need ti nest iterations.

Denis C de Azevedo Over a year ago

@NiranjanBalkrishnaPrajapati Check my last edition, it contains the plunkr working with your JSON.

Niranjan Balkrishna Prajapati Over a year ago

checked ur updated plunkr but when i put id as 5 it shows undefined.i want it to provide me the data with category 5 and 6 also its working for other ids but not working for category_id 5 & 6. Please let me know what is the issue causing it.

Denis C de Azevedo Over a year ago

As I said, you would need to nest iterations to get the different levels of categories: updated plunkr. This one is getting the first level (ids 5 or 6). To get the third level (id 18 for example), you will need a nested iteration. The best solution is to create a recursive filter or function to do this.

|

Collectives™ on Stack Overflow

Filtering nested JSON data based on id Angularjs

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related