$.each() not properly iterating over array

Question

I am having an issue iterating over an associative array with jQuery. I have four spans in the html page... and I use json to form an array of the text() values from those to build an array of dimensions

var export_pkg = { 
           height : $('#cubeiq_hght').text(),
           length : $('#cubeiq_lnth').text(), 
            depth : $('#cubeiq_wdth').text(), 
           weight : $('#cubeiq_wght').text() 
};

$.each(export_pkg, function(key,value){

    alert(key + ' ' + value);

});

For a reason I cannot figure out... the length of export_pkg is always the text value for length within the array. Both Firefox and IE's developer tools shows export_pkg to be an array with 4 items and it has the correct value. But when I get to the $.each block... it ignores the object and just uses the second entry as the length of the object.

Example: If the array had a {length: 10} the alert box appears 10 times no matter what the value of the others is. I cannot figure out for the life of me why it does not run 4 times as I would expect it to.

Here is a jslint link http://jsfiddle.net/fFDfU/

Answer 1

First, you isn't using an array, it's an object. But you can iterate object properties using each as you want.

The length property is used by each to see how many items need to be iterated. Since you have a length inside your object, it confuses each.

I suggest you to change that property name: http://jsfiddle.net/ErickPetru/fFDfU/1/