The short version:

• How can I get a list of all the objects (including their descendant objects) on the page (not just the first-depth objects)?
• Anticipated subproblem: How can I track the visited objects as I walk the objects?

Thanks in advance.

The long version (with background!!):

Using the in keyword we can get all the properties of an object. (And using the hasOwnProperty method allows us to filter out only the properties that belong to that object and not the inherited ones.)

for (var prop in obj) {
   if (typeof(obj[prop]) == 'object'  && obj.hasOwnProperty(prop)) {
            showObjectsOfInternal(obj[prop], visitedObjects); // recursion.
   }
}

That is a good starting point, but I would like to get all the objects. One could imagine iterating through all the properties and accumulating the objects, then recursively iterating through those. However, if there was an object reference loop, like an object referred to itself, such as in window.window, it would be good not to get trapped by that. So one needs a way to track all the 'visited objects' during the recursion.

To track the visited object, one really needs a hashset of objects, based on their internal object key. I tried that by making a visitedObjects object and setting it's keys as the object to be added, and the value didn't matter.

if(visitedObjects[obj] == 1){return;}
visitedObjects[obj] = 1;

But that didn't work for me. (It seems to turn the objects into strings for keys, instead of using their internal reference keys)

So instead I decided to use an array and add an indexOf method.

Array.prototype.indexOf = function(obj){
   for(var i = 0; i < this.length; i++)
   {
      if(this[i] == obj) // reference parison for non-primitive objects.
      {
         return i;
      }  
   }
   return -1; 
}

But that didn't work either (eventually I got that I couldn't do for(var prop in obj) even though the object wasn't null! The debugger said that obj did not support that property.)

In any case, here is my buggy code:

function showObjectsOf(obj) {
    var objHolder = new Array();
    var ancestorNames = new Array();
    ancestorNames.push('obj');
    showObjectsOfInternal(obj, objHolder, ancestorNames);
}
function showObjectsOfInternal(obj, visitedObjects, ancestorNames) {
    if (visitedObjects.indexOf(obj) != -1) {
        return;
    }
    visitedObjects.push(obj);
    alert(getAncestorString(ancestorNames));
    for (var prop in obj) {
        if (typeof (obj[prop]) == 'object') {
            ancestorNames.push(prop);
            showObjectsOfInternal(obj[prop], visitedObjects, ancestorNames);
            ancestorNames.remove(prop);
        }
    }
}
function getAncestorString(ancestorNames) {
    return ancestorNames.join('.');
}

Array.prototype.indexOf = function(obj) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == obj) {
            return i;
        }
    }
    return -1;
}
Array.prototype.remove = function(obj){
    var ind = this.indexOf(obj);
    if(ind != -1)
    {
        this.splice(ind,1);
    }
}
window.onload = function() { showObjectsOf(window); };

Update Actually, the dictionary may be the better way to go. It just wasn't working for me in IE. works fine in chrome though.

The short version:

• How can I get a list of all the objects (including their descendant objects) on the page (not just the first-depth objects)?
• Anticipated subproblem: How can I track the visited objects as I walk the objects?

Thanks in advance.

The long version (with background!!):

Using the in keyword we can get all the properties of an object. (And using the hasOwnProperty method allows us to filter out only the properties that belong to that object and not the inherited ones.)

for (var prop in obj) {
   if (typeof(obj[prop]) == 'object'  && obj.hasOwnProperty(prop)) {
            showObjectsOfInternal(obj[prop], visitedObjects); // recursion.
   }
}

That is a good starting point, but I would like to get all the objects. One could imagine iterating through all the properties and accumulating the objects, then recursively iterating through those. However, if there was an object reference loop, like an object referred to itself, such as in window.window, it would be good not to get trapped by that. So one needs a way to track all the 'visited objects' during the recursion.

To track the visited object, one really needs a hashset of objects, based on their internal object key. I tried that by making a visitedObjects object and setting it's keys as the object to be added, and the value didn't matter.

if(visitedObjects[obj] == 1){return;}
visitedObjects[obj] = 1;

But that didn't work for me. (It seems to turn the objects into strings for keys, instead of using their internal reference keys)

So instead I decided to use an array and add an indexOf method.

Array.prototype.indexOf = function(obj){
   for(var i = 0; i < this.length; i++)
   {
      if(this[i] == obj) // reference parison for non-primitive objects.
      {
         return i;
      }  
   }
   return -1; 
}

But that didn't work either (eventually I got that I couldn't do for(var prop in obj) even though the object wasn't null! The debugger said that obj did not support that property.)

In any case, here is my buggy code:

function showObjectsOf(obj) {
    var objHolder = new Array();
    var ancestorNames = new Array();
    ancestorNames.push('obj');
    showObjectsOfInternal(obj, objHolder, ancestorNames);
}
function showObjectsOfInternal(obj, visitedObjects, ancestorNames) {
    if (visitedObjects.indexOf(obj) != -1) {
        return;
    }
    visitedObjects.push(obj);
    alert(getAncestorString(ancestorNames));
    for (var prop in obj) {
        if (typeof (obj[prop]) == 'object') {
            ancestorNames.push(prop);
            showObjectsOfInternal(obj[prop], visitedObjects, ancestorNames);
            ancestorNames.remove(prop);
        }
    }
}
function getAncestorString(ancestorNames) {
    return ancestorNames.join('.');
}

Array.prototype.indexOf = function(obj) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == obj) {
            return i;
        }
    }
    return -1;
}
Array.prototype.remove = function(obj){
    var ind = this.indexOf(obj);
    if(ind != -1)
    {
        this.splice(ind,1);
    }
}
window.onload = function() { showObjectsOf(window); };

Update Actually, the dictionary may be the better way to go. It just wasn't working for me in IE. works fine in chrome though.

• javascript
• javascript-objects

• Define "on the page". Do you mean DOM elements? Do you mean the entire object tree under the global object? – Šime Vidas Commented Dec 7, 2011 at 2:14
• 1 Also, what could you possibly want to do with all those objects? – Šime Vidas Commented Dec 7, 2011 at 2:16
• @ŠimeVidas: I suppose I mean the entire object tree under the global object. I guess the entire object tree under any given object is what I want as a subproblem. – user420667 Commented Dec 7, 2011 at 2:18
• So you want this, right? :P – Šime Vidas Commented Dec 7, 2011 at 2:18
• 3 Why? Why do you need this method? Also your looking for console.dir(window) – Raynos Commented Dec 7, 2011 at 2:41

1 Answer 1

My quick attempt:

var objs = []; // we'll store the object references in this array

function walkTheObject( obj ) {
    var keys = Object.keys( obj ); // get all own property names of the object

    keys.forEach( function ( key ) {
        var value = obj[ key ]; // get property value

        // if the property value is an object...
        if ( value && typeof value === 'object' ) { 

            // if we don't have this reference...
            if ( objs.indexOf( value ) < 0 ) {
                objs.push( value ); // store the reference
                walkTheObject( value ); // traverse all its own properties
            } 

        }
    });
}

walkTheObject( this ); // start with the global object