Chris' Blog

While I can be a glutton for punishment, verifying Javascript arrays can be more than I want to deal with. If you print an array:

<script type="text/javascript">
var testarray = new Array(
    new Array(1, 2, 3, new Array(4, 5)),
    new Array(6, 7, 8, new Array(9, 10)),
    new Array(1, 2)
);

alert(testarray);
</script>

This creates a popup that says "1,2,3,4,5,6,7,8,9,10,1,2." In order to test for items in the sub-arrays, the quick and dirty method would involve typing commands into the browser's address bar:

javascript:alert(testarray[0])

This would pop up with "1,2,3,4,5." Firebug can help significantly with its DOM tab and JavaScript console. Still, I have found myself wanting a function similar to PHP's print_r() while changing global arrays in functions. Here is my little hack:

Array.prototype.pretty = function(spacer, prefix) {
    var first = true, afterarray = false, type, ret = '', x;

    if (spacer == undefined) {
        spacer = '';
    }
    if (prefix == undefined) {
        prefix = '';
    } else {
        prefix += ' => ';
    }

    ret += spacer+prefix+'Array(';
    for (x in this) {
        // Don't show this function prototype... or any others.
        type = typeof(ret[x]);
        if ((type != 'string') && (type != 'number') && (type != 'boolean')) {
            continue;
        }

        // Don't place commas before the first item.
        if (first) {
            first = false;
        } else {
            // If we are following an array with an array, don't add a newline
            if (this[x] instanceof Array) {
                afterarray = false;
            }
            // Place a newline after child arrays
            ret += ','+(afterarray ? "\n" : ' ');
            afterarray = false;
        }

        // Call ourselves recursively when an array is encountered.
        if (this[x] instanceof Array) {
            ret += "\n"+this[x].pretty(spacer+'    ', x);
            afterarray = true;
        } else {
            ret += this[x];
        }
    }

    // Close arrays
    ret += (afterarray ? "\n"+spacer : '')+')';

    return ret;
}

Now you can use:

<script type="text/javascript">
var testarray = new Array(
    new Array(1, 2, 3, new Array(4, 5)),
    new Array(6, 7, 8, new Array(9, 10)),
    new Array(1, 2)
);

alert(testarray.pretty());
</script>

Which will create:

Array(
    0 => Array(1, 2, 3,
        3 => Array(4, 5)
    ),
    1 => Array(6, 7, 8,
        3 => Array(9, 10)
    ),
    2 => Array(1, 2)
)

Arrays will be indented to an infinite depth so that more than three levels can be displayed. I specifically needed this for a situation that involved three-dimensional arrays.

Drawback: If you are using "for (var x in testarray)," this function prototype will appear as one of the 'x' items. You will either have to convert this to a standard function or check the datatype of 'x.'

Happy debugging.