Calling same function in multiple object's context?

Question

I have an object structure like so;

{
   this.parent = undefined;
   this.children = [];
}

All values in children have the same structure as above except that their parent would be would a reference to the object that has it as its child.

How can I easily iterate over all children of children etc but in the child's object context?

I know how I can loop the children for one object

obj.children.forEach(function(child) {

});

But how can I iterate all children of children, when the children could be into 10-20-30 deep heirachy?

You must use a recursive function.

user1823761
– user1823761

2013-05-19 05:20:02 +00:00
Commented May 19, 2013 at 5:20 — user1823761
– user1823761, Commented May 19, 2013 at 5:20

icktoofay · Accepted Answer · 2013-05-19 05:56:50Z

5

Use recursion.

function deepForEach(node, fn) {
    fn(node);
    node.children.forEach(function(child) {
        deepForEach(child, fn);
    });
}

deepForEach(obj, function(obj) {
    console.log(obj);
});

The way this works becomes evident if we state it in plain English:

If there are no children, just call the callback with the node. (base case)
If there are children, first deal with ourself, and then do this whole procedure for each child.

This type of recursion is called preorder traversal.

edited May 19, 2013 at 5:56

answered May 19, 2013 at 5:20

icktoofay

130k23 gold badges261 silver badges239 bronze badges

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

1 Comment

user2251919 Over a year ago

Could you please explain what is happening here please?

user1823761 · Accepted Answer · 2013-05-19 05:32:18Z

We will write a recursive function. Recursive means that it will execute itself again:

function iterate(obj) {
    // we will write the parent and the name
    console.log(obj.parent + ' | ' + obj.name);

    // if it has children
    if (obj.children.length) {
        // for each child
        for (var i = 0, l = obj.children.length; i < l; i++) {
            // we will call this function again
            arguments.callee(obj.children[i]);
        }
    }
}

Now if we have an object like this:

var obj = {
    name: 'P1',
    parent: undefined,
    children: [
        {
            name: 'P2',
            parent: 'P1',
            children: []
        },
        {
            name: 'P3',
            parent: 'P1',
            children: [
                {
                    name: 'P4',
                    parent: 'P3',
                    children: [
                        {
                            name: 'P5',
                            parent: 'P4',
                            children: []
                        }
                    ]
                }
            ]
        },
        {
            name: 'P6',
            parent: 'P1',
            children: []
        }
    ]
};

We can iterate all over it:

iterate(obj);

FIDDLE DEMO (open your console in browser)

6502 · Accepted Answer · 2013-05-19 06:44:39Z

The standard way is to use recurson like icktoofay is suggesting.

Something that is a little more annoying in this kind of processing is how to manage traversal in "chunks" (e.g. if you want to do this in "background" in a javascript program using a timer).

In this case you can use an explicit stack:

function process_tree(root_node,
                      process_node,
                      chunk_size,
                      completion_call)
{
    var todo = []; // nodes that need processing

    function processOneChunk() {
        for (var j=0; todo.length && j<chunk_size; j++) {
            var x = todo.pop();
            process_node(x);
            for (var i=0; i<x.children.length; i++) {
                todo.push(x.children[i]);
            }
        }
        if (todo.length) {
            setTimeout(processOneChunk, 0);
        } else {
            completion_call();
        }
    }

    todo.push(root_node);
    setTimeout(processOneChunk, 0);
}

Collectives™ on Stack Overflow

Calling same function in multiple object's context?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related