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.

You're passing a string, not an array. Can you clarify your question? — Frédéric Hamidi
– Frédéric Hamidi, Commented Jun 10, 2013 at 22:03

lonesomeday · Accepted Answer · 2013-06-10 22:04:36Z

5

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.

answered Jun 10, 2013 at 22:04

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

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

3 Comments

lonesomeday Over a year ago

@FrédéricHamidi "on that function call". Obviously it will be relatively minor in the grand scheme of things. Comparison

Sanya Over a year ago

Thanks. What if my arrays are multi-dimensional. var arr1 = [{"x1":"one", "x2:"two", "x3":"three"},{"x4":"four","x5":"five","x6":"six"}];

lonesomeday Over a year ago

@Sanya Then add that into the values object. Javascript objects and object access is generally fairly intuitive...

Sushanth -- · Accepted Answer · 2013-06-10 22:04:47Z

1

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);
    }

});

answered Jun 10, 2013 at 22:04

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

2 Comments

Sanya Over a year ago

Thanks. What if my arrays are multi-dimensional. var arr1 = [{"x1":"one", "x2:"two", "x3":"three"},{"x4":"four","x5":"five","x6":"six"}];

Sushanth -- Over a year ago

Replace arrays[myVal][2] with arrays[myVal][0][key] or arrays[myVal][1][key]

Lochemage · Accepted Answer · 2013-06-10 22:14:47Z

1

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]);

answered Jun 10, 2013 at 22:14

Lochemage

3,97413 silver badges11 bronze badges

1 Comment

Frédéric Hamidi Over a year ago

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.

Collectives™ on Stack Overflow

jQuery pass array as argument in function

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related