jQuery pass array as argument in function

Question

I am trying to pass an array as an argument in a function

See the --> fiddle <--

From what I've tested it seems the function is reading the argument as a string rather than an array. How do I pass the array as an argument in the function?

HTML

<button id='arr1'>Click for Array 1</button>
<button id='arr2'>Click for Array 2</button><br/><br/>
<div id='mainstuff'>
 <p>When you click button, text should be added</p>
</div>

jQuery

$(document).ready(function() {
 var arr1 = ["one", "two", "three"];
 var arr2 = ["eleven", "twelve", "thirteen", "fourteen"];
 $('button').click(function() {
 var myval = $(this).attr('id');
 showstuff(myval); 
 });
 function showstuff(myval) {
 var x = "<p>The new text is " + myval[2] + "</p>";
 $('#mainstuff').append(x);
 }
});

EDIT: Fiddle has been updated to fix syntax errors.

• Frédéric Hamidi: You're passing a string, not an array. Can you clarify your question?
• Sanya: I just noticed. I will update soon. Thanks

Answer 1

You shouldn't do this. Don't try to call variables dynamically, i.e. without knowing their names. You can do it at a push in some circumstances, but it's a bad idea.

The best solution here is to use an object and square bracket notation to get a value from the object dynamically:

var values = {
 arr1: ["one", "two", "three"],
 arr2: ["eleven", "twelve", "thirteen", "fourteen"]
}
$('button').click(function() {
 var myval = this.id;
 showstuff(values[myval]); 
});

NB that I have changed $(this).attr('id') to this.id for much increased performance.

• lonesomeday: @FrédéricHamidi "on that function call". Obviously it will be relatively minor in the grand scheme of things. Comparison
• Sanya: Thanks. What if my arrays are multi-dimensional. var arr1 = [{"x1":"one", "x2:"two", "x3":"three"},{"x4":"four","x5":"five","x6":"six"}]
• lonesomeday: @Sanya Then add that into the values object. Javascript objects and object access is generally fairly intuitive...

Answer 2

You cannot pass in string values to be converted to objects directly. Instead store your arrays as a key-value pairs and then try to access them.

$(document).ready(function () {
 var arrays = {
 arr1 : ["one", "two", "three"],
 arr2 : ["eleven", "twelve", "thirteen", "fourteen"]
 };
 $('button').click(function () {
 var myval = $(this).attr('id');
 showstuff(myval);
 });
 function showstuff(myval) {
 var x = "<p>The new text is " + arrays[myVal][2] + "</p>;
 $('#mainstuff').append(x);
 }
});

• Sanya: Thanks. What if my arrays are multi-dimensional. var arr1 = [{"x1":"one", "x2:"two", "x3":"three"},{"x4":"four","x5":"five","x6":"six"}]
• Sushanth --: Replace arrays[myVal][2] with arrays[myVal][0][key] or arrays[myVal][1][key]

Answer 3

You would have to store your array variables in a common object (or the window scope, which is bad practice) that you can retrieve later:

var commonObject = new Object();
commonObject.arr1 = ["one", "two", "three"];
commonObject.arr2 = ["eleven", "twelve", "thirteen", "fourteen"];

Then to retrieve that variable by string name:

var myval = $(this).attr('id');
showstuff(commonObject[myval]);

• Frédéric Hamidi: There is no real reason to keep using new Object() instead of the empty object literal {} nowadays, unless you have to support ancient, obscure browsers.