Create multiple unique Arrays jQuery

Question

So I have a loop which creates 9 unique buttons, with unique id numbers and unique titles. These buttons open up a modal window with checkboxes and I've been saving the checkbox data into 1 Array. Just realized my error and I need to know how to loop through and create 9 uniquely named Arrays as well.

Current code:

$('.roleBtn').click(function () {
    roleName = $(this).html();        /* Get role name */
    role_ID = $(this).attr('id');     /* Get role id */
    row_Name = ('row-'+role_ID );     /* Create Row Name */
    blueBtn = ('blue-btn-'+role_ID)   /* Create Blue Button */
    var str = $(this).attr('id');       
    substr = str.split ('role-');
    the_Num = substr[1];              /* Get the role ID and split to save number in the_Num */
    modal_ID = ('modal-'+the_Num);    /* Now get the associated modal number */
    genreAry = [];                    /* My Array, I need to make 9 of these */

Basically I have an XSL for-each loop which creates 9 buttons and adds role-(+number) to the id. I'm then able to grab the content of the buttons and the #ids via jQuery.

<xsl:for-each select="$TalentUser/item">
    <li class="roleBtn" id="role-{position()}">
        <xsl:value-of select="sc:fld('title',.)" />
    </li>
</xsl:for-each>

I could not find how to correctly name each new Array, how would you get/create the following:

genreAry1 = [];
genreAry2 = [];
genreAry3 = [];

UPDATE Working code thx to @Don McCurdy

My XSL Put a javascript function to get the number of buttons created (in my case 9)

<div id="talent-gender">
    <ul>
        <!-- For Each to get Talent Roles -->
        <xsl:for-each select="$TalentUser/item">
            <li class="roleBtn" id="role-{position()}">
                <xsl:value-of select="sc:fld('title',.)" />
            </li>
         </xsl:for-each>
         <script type="text/javascript">createRoleGenreArrays();</script>
    </ul>
</div>

jQuery Global vars

var array_of_arrays = [];
var object_with_arrays = {};
var num_role_leon = 0;

The createRoleGenreArrays function which captures the final loop number (9)

function createRoleGenreArrays () {

    for (i = 0; i < numRoleAry_leon.length; i++) {
        array_of_arrays.push([]);
        object_with_arrays['genreAry'+i] = []; /* creates 9 arrays named genreAry1, genreAray2 ... */
        console.log(i);
    }
}

Then finally using my different Arrays

$('.doneButton').click(function () {

    role_ID = role_id_saved_leon;

    var ary_Num = the_Num - 1; // <-- need to do this

$('.simplemodal-data input:checked').each(function (i) {
        alert($(this).attr('value'));
        object_with_arrays['genreAry'+ary_Num].push($(this).attr('value'));

        //alert($(this).attr('value'));
    });

I have gloabl variables, however this click function is actually inside of another function and that's where my current variables live :) I've been using Global variables to save data that changes when a new button is clicked. I realized the problem with this and am also looking up how to use a jQuery Object to store all my data inside of. — Leon Gaban
– Leon Gaban, Commented Apr 30, 2013 at 15:36
make an allArrays={} outside the loop, and set allArrays["genreAry"+the_Num] instead of an array literal. — dandavis
– dandavis, Commented Apr 30, 2013 at 15:37
Hi Dan, it created an object, and push didn't work.. how do you envision the Array/Object working here? — Leon Gaban
– Leon Gaban, Commented Apr 30, 2013 at 15:43

Don McCurdy · Accepted Answer · 2013-04-30 15:43:37Z

2

Are you asking how to create an arbitrary number of arrays without manually making up variable names for each? If so, I'd consider giving them an encapsulating object or array to make things easier.

var 
   i,
   n = 9,
   array_of_arrays = [],
   object_with_arrays = {};

for (i = 0; i < n; i++) {
   array_of_arrays.push([]);
   object_with_arrays['genreAry'+i] = [];
]

The code above will give you two different ways of doing this:

[ [], [], [], ... ]
{ genreAry1: [], genreAry2: [], ... }

answered Apr 30, 2013 at 15:43

Don McCurdy

12.2k4 gold badges46 silver badges83 bronze badges

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

2 Comments

Leon Gaban Over a year ago

How would you access, push in and retrieve values from those 'object' arrays?

Don McCurdy Over a year ago

object_with_arrays.genreAry1.push(...), for example. Or object_with_arrays['genreAry'+i].push(...) if you need to do that in a loop. Retrieve values by calling object_with_arrays.genreAry1[index].

Alnitak · Accepted Answer · 2013-04-30 15:47:20Z

0

If you need a series of (numerically indexed) arrays, then you should be using...

... a two dimensional array!

answered Apr 30, 2013 at 15:47

Alnitak

341k72 gold badges420 silver badges503 bronze badges

2 Comments

Leon Gaban Over a year ago

No wonder this is so hard to figure out, reading this now exforsys.com/tutorials/javascript/… will come back to this problem after, thx!

Leon Gaban Over a year ago

Edit that article didn't really help, it gave me an idea of what's going on, but I need some real life example, still trying to get Don's answer working

Collectives™ on Stack Overflow

Create multiple unique Arrays jQuery

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related