Recursive AngularJS filter

Question

I have a tree structure like this stored in the $scope.tree object. I want to create a filter, that I could apply to this tree to shrink it to this to be able to do smth like this $scope.cut_tree = $filter('cutTree')($scope.tree) and get that minified output.

But I have really no idea how to do that, everything I've tried so far does not get me anywhere, 'cause I end up changing the $scope.tree itself.

UPDATE

What I have so far:

app.filter("filterTree", ["$filter", function($filter) {
    return function(tree) {
      var newTree = [];
      angular.forEach(tree, function(node, index) {
        var newNode;
        newNode = {
          id: node.id,
          sort_order: index,
          children: $filter('filterTree')(node.children)
        };
        newTree.push(newNode);
      });
      return newTree;
    };
  }
]);

First of all if you don't want to modify the original tree, I'd work with a local copy of the tree using angular.copy (var treeCopy = angular.copy(tree);) — Wawy
– Wawy, Commented Jun 13, 2014 at 13:07
I figured it would be easier to initialize an empty tree inside the filter and push filtered objects there. Otherwise I'll end up having lots and lots of copies. — Almaron
– Almaron, Commented Jun 13, 2014 at 13:12
Javascript objects are passed by reference, you will have to copy each property of the tree and create new objects when necessary if you don't want to modify your original tree. — Wawy
– Wawy, Commented Jun 13, 2014 at 13:18

Julien · Accepted Answer · 2014-06-13 13:20:42Z

1

I've made a working example in this JsFiddle.

The filter used is the following :

angular.module('myApp').filter('cutTree', ['$filter',function ($filter) {
    return function (tree) {
        var res = [];
        var sortOrder=0;
        angular.forEach(tree, function(item) {
            // Deep copy

           var copy = angular.fromJson(angular.toJson(item))
           res.push({
               id:copy.id,
               sort_order:sortOrder,
               children:$filter('cutTree')(item.children)
           })
           sortOrder++;
     });
        return res;
    };
}]);

answered Jun 13, 2014 at 13:20

Julien

2,2363 gold badges27 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Almaron Over a year ago

Thanks. I figured almost the same way. Now it'll be interesting to play with on my own.

Zerot · Accepted Answer · 2014-06-13 13:19:02Z

1

It should be relatively easy to make a recursive function that only copies over the field you want. for example

var cutTree = function(original){
    var result = {};
    result.id = original.id;
    result.name = original.name;
    result.children = [];

    for (var i=0; i<original.children.length; i++)
    {
        result.children.push(cutTree(original.children[i]));
    }

    return result;
}

Then you only need to define a filter that will call this function and return its result.

answered Jun 13, 2014 at 13:19

Zerot

1962 bronze badges

Collectives™ on Stack Overflow

Recursive AngularJS filter

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related