jQuery Id Selection and Dynamic Arrays

Question

I have some code I'm struggling with. The good news is the code working as intended for a single instance; after some thought I've decided to feature multiple of these image selectors on a page. This works but the ugly approach of duplicating the code doesn't scale well (e.g. what if you want 50 of these on there?) The snag I've hit is how I can refer to a specific array. Is an array even an ideal solution for this?

The Objective

I have a series of images that a user may select from, up to X amount. The selected image ids are stored in an array and the image is added to a "selected images pool". This occurs by using an onClick for the slider, I obtain the Id from the element attributes. This is where I'm getting stuck.

var dataArray = $(this).closest("[id^=carousel]").data('array');
var slideCounter = $(this).closest("[id^=carousel]").data('counter');
slideCounter = dataArray.length;

The slideCounter returns the length of the string, not the array elements. How can I tell this code to refer to a particular array? See the fiddle for a better idea of the markup and code: jsFiddle

I have no doubt that there is a better approach. I'm relatively new to front end work, I'd appreciate any insights, I've burnt some brain cells on this, thanks!

jfriend00 · Accepted Answer · 2014-03-12 07:32:10Z

1

From looking at your HTML, it looks like when you do this:

var dataArray = $(this).closest("[id^=carousel]").data('array');

what you're trying to do is to read the name of an array with .data() and then somehow turn that name (which is a string) into the array that's in your variable. My guess is that there's probably a better way to structure your code rather than putting javascript variable names in your HTML. I'd probably put a key name in the HTML and then store the arrays in an object where you can access them by that key name at any time.

Without trying to refactor your code, here's an idea for what you were trying to accomplish:

If selectedSlidesIdArray1 is a global variable, then you can do this:

var dataArray = window[$(this).closest("[id^=carousel]").data('array')];

Using the [stringVariable] notation on an object, lets you access a property by a literal string or a variable that contains a string. Since all global variables are also properties on the window object, you can do it this way for global variables.

If selectedSlidesIdArray1 is not a global variable, then you should probably put it in an object and then you can do this:

var dataArray = yourObj[$(this).closest("[id^=carousel]").data('array')];

edited Mar 12, 2014 at 7:32

answered Mar 12, 2014 at 7:20

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

2 Comments

Two-Bit Alchemist Over a year ago

This will work with the existing code, but I agree it seems like a refactor is called for when you're storing JS variable names in the HTML.

jfriend00 Over a year ago

@Two-BitAlchemist - yep, that's what I said in my answer too.

Two-Bit Alchemist · Accepted Answer · 2014-03-12 07:21:40Z

0

Instead of trying to translate an arbitrary string into a JavaScript variable of the same name, why not just use another array? You can have nested arrays, which is to say an array of arrays.

Thus, instead of selectedSlidesIdArray1, selectedSlidesIdArray2, etc., you would have one selectedSlidesIdArray with sub-arrays, which you could then pull the index for using a data attribute.

answered Mar 12, 2014 at 7:21

Two-Bit Alchemist

18.6k6 gold badges52 silver badges85 bronze badges

Collectives™ on Stack Overflow

jQuery Id Selection and Dynamic Arrays

The Objective

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The Objective

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related