How do I show an unknown length nested array without crashing the browser?

Question

I have an huge array organized sort of like this:

[{ name: 'name1',
   nodes: []},
 { name: 'name2',
   nodes: [
    { name: 'name21',
      nodes: [
        { name: 'name211',
          nodes: []},
        { name: 'name212',
          nodes: []}]
    }]
 },
 { name: 'name3',
   nodes: [...] },
 {...}
]

and it goes on...

I tried to use something like this:

<script type='text/ng-template', id='categoryTree'>
   <p ng-if='!node.nodes'> {{node.name}} </p>
   <details ng-if='node.nodes'>
       <summary><b> {{node.name}}</b></summary>
       <ul>
           <span ng-repeat="node in node.nodes" ng-include="'categoryTree'"></span>
   </details>
</script>

<div>
   <ul>
       <span ng-repeat="node in objArray" ng-include="'categoryTree'"></span>
</div>

This gives me what I want in terms of showing all the nested array in a tree format. The problem is that it seems to be caught in an infinite loop for when I look at the Task Manager, the RAM used starts increasing and only stops when Chrome crashes.

Does anybody know how could I get around with that? Or even if I have a better way to do this tree view?

Sounds like a stack-overflow condition. Your Angular template looks fine, the problem is probably with having a cycle in your object graph (that is, a member of a `nodes` array is already present elsewhere in the tree). — Dai, May 22 '15 at 21:20
That is no valid HTML 5 And, you loop over all nodes in your array then include for each step code that loops over ll nodes in your array there you include code that loops over all nodes in your array and so on. — Peter Paul Kiefer, May 22 '15 at 21:20
Using `` in your template would stop the infinite loop. But it is still invalid HTML. Beside it is not a problem to be handled with a template. You have no mechanism to say use the new node2 as variable node in the included template. — Peter Paul Kiefer, May 22 '15 at 21:33
Sorry guys. I just realized that this was a typo. In my code it is actually ``. I've already edited it — felipefss, May 22 '15 at 21:46

score 0 · Accepted Answer · answered May 22 '15 at 21:43

0

Angular does not really handle recursive directives - by default

But there's a solution:

https://github.com/marklagendijk/angular-recursion

What you need actually is to temporarily remove the nested element when rendering the parent.

answered May 22 '15 at 21:43

gyantasaurus

447
2
9

Thank you very much! This one you suggested haven't done the trick for the memory usage, but the other solution in the same page so far is helping a lot, without any memory leaks. – felipefss May 25 '15 at 18:55
It's actually the simplest I've seen so far and it does all the conditional work in the link function, not in the html. – felipefss May 25 '15 at 18:57

How do I show an unknown length nested array without crashing the browser?

1 Answers1