Dynamic jQuery variable names

Question

I would like to take the value of an li ID attribute (which will be a userID), and use it as part of a string that I will eventually use as part of a variable name. I will use this variable name to create an array with.

I understand the basics, but can't seem to find the right combination of jQuery/javascript to make this magic happen.

jQuery('#user-list li').click(function() {
    var userID = jQuery(this).attr("id");

    // i want to add the word array to the end of userID
    var theVariableName = userID + "Array";

    // I want to use this variable to create an array
    var theVariableName = new Array();

    // I want to continue to use the name throughout my document
    theVariableName.push({startTime: 7, endTime: 10});

    alert(theVariableName[0].startTime);

});

You can't create an Array this way. When you call Array constructor as you did it returns new empty array and the value of the var theVariableName is thus rewrited — d.k
– d.k, Commented Jul 31, 2012 at 17:59
You can only have dynamic properties, not dynamic variables. That said, why do you want a dynamic variable? I do not see the need of it. — pimvdb
– pimvdb, Commented Jul 31, 2012 at 18:02
This may sound like nitpicking, but the title of your question is a little off. It's dynamic -JavaScript- variable names, not jQuery. jQuery makes manipulating the DOM easier, it has nothing to do with core programming logic. I have friends who say "I don't know how to write JavaScript, but I do know how to write jQuery". If you're really serious about developing, it would behoove you not to be like them. Never really getting the underlying structure of how things work will make your life as a dev stressful and unfulfilling. JavaScript is a great language, it's worth the effort to learn. =) — rybosome
– rybosome, Commented Jul 31, 2012 at 18:14

millimoose · Accepted Answer · 2012-07-31 18:03:26Z

2

Use an Object to hold the various user arrays:

window.userData = {};

$(...).click(function() {
    // ...
    window.userData[userID] = [];
    window.userData[userID].push({startTime:7, endTime:10});

    alert(window.userData[userID][0].startTime);
}

You might not want to store the userData object in the global namespace though; to prevent accidental name conflicts, you should at least put it in your own namespace.

answered Jul 31, 2012 at 18:03

millimoose

40.1k11 gold badges90 silver badges138 bronze badges

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

Comments

bingjie2680 · Accepted Answer · 2012-07-31 18:03:50Z

You can store variables in the global window object:

jQuery('#user-list li').click(function() {
    var userID = jQuery(this).attr("id");

    // i want to add the word array to the end of userID
    var theVariableName = userID + "Array";

    // I want to use this variable to create an array
    window[theVariableName] = new Array();

    // I want to continue to use the name throughout my document
    window[theVariableName].push({startTime: 7, endTime: 10});

    alert(window[theVariableName][0].startTime);
});

In fact every var x declared variable x that has not been declared in a closure will reside in the global object. However, I recommend you to use another global object, e.g. userStorageObject or something similar:

var userStorageObject = {};
jQuery('#user-list li').click(function() {
    var userID = jQuery(this).attr("id");

    // i want to add the word array to the end of userID
    var theVariableName = userID + "Array";

    // I want to use this variable to create an array
    userStorageObject[theVariableName] = new Array();

    // I want to continue to use the name throughout my document
    userStorageObject[theVariableName].push({startTime: 7, endTime: 10});

    alert(userStorageObject[theVariableName][0].startTime);
});

it works here: http://jsfiddle.net/bingjie2680/NnnRk/

simekadam · Accepted Answer · 2012-07-31 18:02:13Z

0

You can do that like this..

var variable = "Array";
window[id+variable] = "value";

answered Jul 31, 2012 at 18:02

simekadam

7,40411 gold badges61 silver badges81 bronze badges

Comments

NedStarkOfWinterfell · Accepted Answer · 2012-07-31 18:03:48Z

-2

Try eval:

var theVariableName = userID + "Array";
eval(theVariableName+"= new Array()");

answered Jul 31, 2012 at 18:03

NedStarkOfWinterfell

5,35328 gold badges114 silver badges205 bronze badges

3 Comments

millimoose Over a year ago

This is a really lazy use of eval. Besides, this will (probably) create the variable in the local namespace of the event handler, which is very unlikely to be useful.

Zeta Over a year ago

-1: eval is evil

rybosome Over a year ago

Not a good reason to use eval, and this won't work in future versions of JS which remove support for adding variables created through eval to the current context.

Collectives™ on Stack Overflow

Dynamic jQuery variable names

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related