for loop inside for loop function in javascript

Question

I have a for loop which should loop through an object. But this object can have many other object levels inside it. How can I make a function that should make for loops inside for loops as many levels deeps as I want?

Something like this, where the lvl variable would be the number of levels it should dive in:

var lvl = 5;

for (var i = 0; i < groups.length; i++) {
    var groups = groups[i];

    for (var i = 0; i < groups.length; i++) {
        var groups = groups[i];

        for (var i = 0; i < groups.length; i++) {
            var groups = groups[i];

        }
    }
}

For example, if I have the following object tree:

var foo = {
  child: {
    grand:{
      greatgrand: {
      }
    }
  }
}

How can I console log all the object tree names just by diving to a specific level in the foo object?

dive(2); // would dive to level two (grand)

// would return the following in the console
child
grand

You need separate variables for each nested `for` loop so one loop is not overwriting the variables from the others or you can make a function to do the looping and call it recursively. — jfriend00, Sep 11 '15 at 23:52
Choose a *different* variable name for each loop. JavaScript *only* has a function (and global) variable scope so every `i` (and `groups`) represents the *same* variable and the multiple occurrences of `var` is irrelevant. Search for "variable hoisting" for more details. (With that aside, recursion is pretty natural for "N-levels" although using a stack would be another solution.) — user2864740, Sep 12 '15 at 00:02
Wrt. variable scopes: http://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript , http://stackoverflow.com/questions/30575151/variable-hoisting-in-javascript — user2864740, Sep 12 '15 at 00:03

score 2 · Answer 1 · answered Sep 12 '15 at 00:06

A recursive function--a function that calls itself--is the way to go. You'd want something like this:

/* pseudo-code; this will not run */
function processThing(thing) {
  if (thing is an object) {
    // process all of thing's properties
    for (property in thing) {
      processThing(property);
    }
  }
  else {
    // process thing as a value
  }
}

santon · Accepted Answer · 2015-09-12T19:19:41.457

Here you go. I have coded a recursive function which will iterate an object graph. You can provide a depth argument to the traverse function.

A JSFiddle is here. Please check the developer tools console for output.
A fiddle with indentation added is here

var obj = {
firstName: "John",
lastName: "Doe",
address1A: {
    street: "120 Washington St",
    city: "Mountain View",
    state: "CA",
    address2A: {
        street: "100 Washington st",
        city: "Mountain View",
        state: "CA",
        address3A: {
            street: "150 Washington st",
            city: "Mountain View",
            state: "CA",
            address4A: {
                street: "150 Washington st",
                city: "Mountain View",
                state: "CA",
            }
        }
    }
},
address1B: {
    street: "120 Washington St",
    city: "Mountain View",
    state: "CA",
    address2B: {
        street: "100 Washington st",
        city: "Mountain View",
        state: "CA",
        address3B: {
            street: "150 Washington st",
            city: "Mountain View",
            state: "CA",
            address4B: {
                street: "150 Washington st",
                city: "Mountain View",
                state: "CA",
            }
        }
    }
}
};

function traverse(initObj, depth) {
     depthTraversal(initObj, depth, 1);
}

function depthTraversal(objArg, depthArg, counterArg) {
    //create a closure for remembering loop variables
    return (function (myObj, myDepth, counter) {
        //console.log(myDepth + " - " + counter);
        if (myDepth < counter) {
          return;
        }
       //console.log(myObj);
       for (var prop in myObj) {
          //console.log(prop + " :" + typeof (myObj[prop]));
          if (myObj.hasOwnProperty(prop)) {
             if (typeof (myObj[prop]) === "object") {
                console.log(prop);
                depthTraversal(myObj[prop], myDepth, counter + 1);
             }
          }
      }
}(objArg, depthArg, counterArg)); //IIFE
};


traverse(obj, 4);

Thanks, I'll review your solution to better understand how to use this :) — gespinha, Sep 12 '15 at 12:41

for loop inside for loop function in javascript

2 Answers2