Looping through Nested Object Arrays Hangs Browser

[GooberKing]

Hey folks, I've got a real head-scratcher here. Below is a simple, quick script I've written that defines an object that contains an array plus an ID property. I then create a nested chain of objects by storing each child in the parent's array, like so:

function TestObj() {
	this.ID = "";
	this.TestArray = new Array();
}
TestObj.prototype.AlertArray = function() {
	document.write("TestObj " + this.ID);
	for (t=0; t<this.TestArray.length; t++)
		this.TestArray[t].AlertArray();
}

var masterObj = new TestObj();
masterObj.ID = "0";

for (a=0; a<3; a++) {
	var tempObj = new TestObj();
	tempObj.ID = masterObj.ID + "_" + a;
	for (b=0; b<3; b++) {
		var temp2Obj = new TestObj();
		temp2Obj.ID = tempObj.ID + "_" + b;
		for (c=0; c<3; c++) {
			var temp3Obj = new TestObj();
			temp3Obj.ID = temp2Obj.ID + "_" + c;
			temp2Obj.TestArray[temp2Obj.TestArray.length] = temp3Obj;
		}
		tempObj.TestArray[tempObj.TestArray.length] = temp2Obj;
	}
	masterObj.TestArray[masterObj.TestArray.length] = tempObj;
}

masterObj.AlertArray();

Theoretically, this code should iterate through all the nested objects and display an alert message for each child object's ID. So, I should see messages that appear in this order:

TestObj 0
TestObj 0_0
TestObj 0_0_0
TestObj 0_0_0_0
TestObj 0_0_0_1
TestObj 0_0_0_2
TestObj 0_0_1
TestObj 0_0_1_0
etc...

Instead, when I run the code, the browser gets stuck at 0_0_0_1 and infinitely loops. Eventually, the browser yells that the script is taking too long and I have to abort it.

To add salt to the wound, if I change the AlertArray function to this:

TestObj.prototype.AlertArray = function() {
	document.write("TestObj " + this.ID);
	if (this.TestArray.length > 0) {
		for (t=0; t<this.TestArray.length; t++)
			this.TestArray[t].AlertArray();
	}
}

The code manages to make it all the way to 0_0_0_2 and then stops entirely, without traversing the rest of the object chain. This all happens regardless of browser (happens in both FF and IE).

Any ideas or suggestions would be greatly appreciated! I've been banging my head against the wall all week on this, and I don't think I have much skull left! Thanks in advance!

[~s.o.s~]

> I've been banging my head against the wall all week on this, and I don't think I have much
> skull left!

Here, I will put you out of your misery. :-)

Anyways, the bug in the program is pretty apparent here given that you make use of global variables in a recursive call. The variable 't' declared in the function AlertArray has global scope given that it is not prefixed with var.Hence, instead of each invocation of the function having its own copy of the counter 't', each function invocation uses the same variable 't' and hence it ends up never being incremented.

TestObj.prototype.AlertArray = function() {
  document.write("<br>TestObj " + this.ID);
  for (var t = 0; t < this.TestArray.length; ++t) {
    this.TestArray[t].AlertArray();
  }
}

[GooberKing]

It's always the little things that trip one up. Thanks a bunch! :D

[~s.o.s~]

> It's always the little things that trip one up. Thanks a bunch! :D

You are welcome. Also please make sure you mark the thread as solved if your query is answered by clicking the 'Mark as solved' link.