How to create and organize a JavaScript array?

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?

If you're not modifying the data client-side, the other possible way of achieving this is to use SerializeJSON() on the query and send that to the client,as well as the HTML representation. That way you don't have to scrape the DOM for the data to send back later. Admittedly, the serialized Query probably won't be in the right form, but I think CF will convert it back into a query object on the server, which may be handy. — barnyr
– barnyr, Commented Nov 8, 2012 at 17:10

Sirko · Accepted Answer · 2012-11-08 16:35:27Z

5

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.

answered Nov 8, 2012 at 16:35

Sirko

74.3k19 gold badges157 silver badges194 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Evik James Over a year ago

Can you clarify this? "You have to init SpecArray as an array, though, and not as an object containing 3 arrays." I have seen many examples of DO NOT CREATE AN ARRAY THIS WAY. What would be the RIGHT way to create this array?

Sirko Over a year ago

@EvikJames Just use var SpecArray = []; instead of SpecArray = { Height: [], Width: [], Length: [] };. Besides the last alert() call your code should be fine then.

Evik James Over a year ago

Thanks so much! I just couldn't get my brain to think about this the right way. I appreciate your time and knowledge.

Collectives™ on Stack Overflow

How to create and organize a JavaScript array?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related