Question

I’m trying to loop through an object like you would an array. I’m struggling to append the loop counter to the variable name.

I have an object like this (output with dump(), which I found here):

object(2): {
  elem0:  array(4): {
    [0]:  string(27): "http://placehold.it/300x300"
    [1]:  string(3): "0.8"
    [2]:  string(4): "-150"
    [3]:  string(3): "200"
  }
  elem1:  array(4): {
    [0]:  string(27): "http://placehold.it/300x300"
    [1]:  string(3): "0.6"
    [2]:  string(3): "-70"
    [3]:  string(3): "458"
  }
}

Here’s how I’m trying to loop through it:

jQuery(document).ready(function($) {

    // Provides object-measuring functionality
    Object.size = function(obj) {
        var size = 0, key;
        for (key in obj) {
            if (obj.hasOwnProperty(key)) size++;
        }
        return size;
    };

    // Returns the number of objects in my object
    var size = Object.size(window.depthElems);

    /*
    This is where I'm having difficulty.
    I would like to use window.depthElems.elem0,
    then window.depthElems.elem1, etc.
    */

    for (var i = 0; i < size; i++) {
        $('.wrapper').append('<img src="' + window.depthElems.elem+i+[0] + '" />'); 
    }

});

Answer 1

I will, for the sake of argument, also provide my question as answer. You can use:

for(element in window.depthElems) {
    if(window.depthElems.hasOwnProperty(element)) {
        $('.wrapper').append('<img src="' + window.depthElems[element] + '" />');
    }
}

This is not only more elegant, but also requires far less code. Of course if there is a reason to use the other code, please say so.

Note: This code is edited to also include the ability to read ‘arrays’, however the question was to make it work with ‘objects’. If you use ‘objects’ the ‘hasOwnProperty’ check is superfluous.

Note #2: You can also use var hasOwn = Object.prototype.hasOwnProperty; like Azder said, which is a nice safeguard.