How can I access a javascript array with a dynamically created name?

Question

This is a very stripped down example of what I'm trying to do. These arrays are generated with server side code and I can't know which arrays will be there except that they will always be 'array' followed by a number.

var array1 = ['cat','dog','fish','bird'];
var array2 = ['taco','pizza','burger','salad'];
var array3 = ['maple','elm','pine'];

The user selects an option from select-1

<select id="select-1" onchange="getArray()">
    <option value="1">Pets</option>
    <option value="2">Foods</option>
    <option value="3">Trees</option>
</select>

Then I need my function to access the correct array corresponding to the value of select-1. Every option that appears in select-1 will have a corresponding array.

function getArray() {
    var x = document.getElementById("select-1").value;

    //how do I access "arrayx"?

    var y = arrayx[0];
}

How can I write the function to get a value from the correct array? I need something like

arrayname = 'array' + x;

but I can't figure out how to get there from here.

Here is a fiddle that's set up to experiment with: http://jsfiddle.net/6yor1kp5/9/

Put the arrays in an object and then use the `[ ]` operator. — Pointy, Jun 21 '18 at 19:45
Do you have control over that serverside code (to rewrite it in a reasonable way) or is it fixed and you just have to work around it somehow? — Peteris, Jun 21 '18 at 19:47
not a good idea but you can use "var y = eval(`array${x}[0]`);" http://jsfiddle.net/6yor1kp5/11/ — Muhammad Usman, Jun 21 '18 at 19:49
I could change the server-side code yes. I'm not certain what a better way to do that would be. — Anonymous Man, Jun 21 '18 at 19:53
`var array = [ ['cat','dog','fish','bird'], ['taco','pizza','burger','salad'], 'maple','elm','pine'] ]; ... array[x]` As the other commenters said, use an array. — melpomene, Jun 21 '18 at 19:59

score 5 · Accepted Answer · answered Jun 21 '18 at 19:49

5

If it is in the global context in a browser, you can use window[arrayname].

e.g.

var y = window["array"+x][0];

in your fiddle.

answered Jun 21 '18 at 19:49

tevemadar

12,389
3
21
49

2

`var y = this["array"+x][0];` is also an option. – Peteris Jun 21 '18 at 19:52
This worked beautifully. – Anonymous Man Jun 21 '18 at 19:55
To the downvoter, who probably never returns: I did not say it was anything beautiful, but it works for sure, so does the suggestion of @Peteris – tevemadar Jun 21 '18 at 20:17

score 2 · Answer 2 · answered Jun 21 '18 at 19:48

You could just follow @Pointy and surround the arrays in another array. In your current situation you'd have to append the arrays into arrayx when you load the arrays from the server.

var arrayx = [
    ['cat','dog','fish','bird'],
    ['taco','pizza','burger','salad'],
    ['maple','elm','pine']
];

score 0 · Answer 3 · answered Jun 21 '18 at 19:50

You can use eval function for this -

var array1 = ['cat','dog','fish','bird'];
var array2 = ['taco','pizza','burger','salad'];
var array3 = ['maple','elm','pine'];

//if you want to use array1

var array = eval("array" + 1);

console.log(array);

But one should never ever use eval

How can I access a javascript array with a dynamically created name?

3 Answers3