Question

I am using ColdFusion 8 and jQuery 1.8.

I have some info coming out of a database and being populated into divs like this:

<div class='SpecInfo' data-height='10' data-width='23' data-length='156'></div>
<div class='SpecInfo' data-height='20' data-width='21' data-length='159'></div>
<div class='SpecInfo' data-height='30' data-width='25' data-length='154'></div>
<div class='SpecInfo' data-height='40' data-width='27' data-length='155'></div>
<input type='button' id='GoButton' value='Go!'>

I need to pull out that information and put it into an array and pass it to a CFC. I have a function that collects the data. It looks like this:

// SET VARS
$GoButton = $("#GoButton"),
    SpecArray = {
        Height: [],
        Width: [],
        Length: []
    };

// GO
var go = function() {
    var $SpecInfo = $(".SpecInfo"),
        SpecInfoLen = $SpecInfo.length,
        H, 
        W,
        L;
    for (i = 0; i < SpecInfoLen; i++) {
        var H = $SpecInfo.eq(i).data('height'),
            W = $SpecInfo.eq(i).data('width'),
            L = $SpecInfo.eq(i).data('length');
        // add H,W,L values to spec array
        SpecArray['Height'].push(H);
        SpecArray['Width'].push(W);
        SpecArray['Length'].push(L);
    }
    // stringify spec array
    // pass spec array to cfc
    alert(SpecArray['Height'].length);
}
$GoButton.click(go);

What this gives me is an array of heights, an array of widths, and an array of lengths. This is not what I want. My info is organized like this

[10,20,30,40]
[23,21,25,27]
[156,159,154,155]

For each div, I want all of the attributes in a single place. I want something more like this:

[10,23,156]
[20,21,159]
[30,25,154]
[40,27,155]

What am I doing wrong? How do I organize my array?

Answer 1

So why do you put all the data in 3 separate arrays instead of an array of objects?

Instead of

    SpecArray['Height'].push(H);
    SpecArray['Width'].push(W);
    SpecArray['Length'].push(L);

use

    SpecArray.push( { 'height': H, 'width': W, 'length': L } );

This results in an array of objects like the following:

[
 { 'height': 10, 'width': 23, 'length': 156 },
 { 'height': 20, 'width': 21, 'length': 159 },
 { 'height': 30, 'width': 25, 'length': 154 },
 { 'height': 40, 'width': 27, 'length': 155 }
]

You have to init SpecArray as an array, though, and not as an object containing 3 arrays.