How to dynamically retrieve data from array where variable name comes from user input

Question

I have arrays in javascript: arrayOne, arrayTwo, arrayThree, arrayFour... with variable numbers of data in each

Now the user gives input in input box One/Two/Three... and the index of the array.

For example, if the user inserted One and 3 as inputs my task would be to return the value from arrayOne[3]

I am unable to retrieve the data from array. My code returns the 3rd letter from string "arrayOne" ie. "a".

a= arrayOne
Index= 3
a[index] : a

How to retrieve the arrayOne[3] data?

var arrayOne = ['mango', 'banana', 'pine', 'orange'];
var arrayTwo = ['adobe', 'microsoft', 'apple', 'yahoo'];
var arrayThree = ['england', 'china', 'nepal', 'japan', 'usa', 'india'];
// suppose i have many more arrayFour,arrayFive,....,arrayFifty

function fun() {
  var index = document.getElementById('index').value;
  var name = document.getElementById('name').value;
  var a = 'array' + name;
  var b = a[index];
  document.getElementById('para').innerHTML = b;
  document.getElementById('para3').innerHTML = index;
  document.getElementById('para2').innerHTML = a;
}

p {
  border: 1px dotted black;
}

<!-- Try with One and 3 -->
Choose one,two,three,..,fifty:<br>
<input type='text' id='name'><br> Choose index:<br>
<input type='number' id='index'><br>
<input type='button' onclick='fun();' value='Go'>

<p>a=
  <span id='para2'></span>
</p>
<p>Index=
  <span id='para3'></span>
</p>
<p>
  a[index] :
  <span id='para'></span>
</p>

I have created the HTML,Js,Css in Fiddle on http://jsfiddle.net/wh0q21bL/

yes , but how to get the arrayOne[3] o arrayTwo[1] or anything dyanamic? what will be minimal code — j. dot, Apr 09 '18 at 19:16
Try ```var a = 'array' + name; var b = eval(a)[index];``` instead of ```var a = 'array' + name; var b = a[index];``` — Stefan Octavian, Apr 09 '18 at 19:16
It kind of looks like you are storing your data poorly, perhaps an object with keys and each value is an array would be better. — Xotic750, Apr 09 '18 at 19:19
Possible duplicate of [Use dynamic variable names in JavaScript](https://stackoverflow.com/questions/5117127/use-dynamic-variable-names-in-javascript) — Heretic Monkey, Apr 09 '18 at 19:22

Taki · Accepted Answer · 2018-04-09T19:25:29.220

a quick fix is to use eval() that i'm not a big fan of.

  var b = eval(a)[index];

note : enter the name of the array with capital first letter like One.

var arrayOne = ['mango', 'banana', 'pine', 'orange'];
var arrayTwo = ['adobe', 'microsoft', 'apple', 'yahoo'];
var arrayThree = ['england', 'china', 'nepal', 'japan', 'usa', 'india'];

function fun() {
  var index = document.getElementById('index').value;
  var name = document.getElementById('name').value;
  var a = 'array' + name;
  var b = eval(a)[index];
  document.getElementById('para').innerHTML = b;
  document.getElementById('para3').innerHTML = index;
  document.getElementById('para2').innerHTML = a;
}

p {
  border: 1px dotted black;
}

<!-- Try with One and 3 -->
Choose one,two,three,..,fifty:<br>
<input type='text' id='name'><br> Choose index:<br>
<input type='number' id='index'><br>
<input type='button' onclick='fun();' value='Go'>

<p>a=
  <span id='para2'></span>
</p>
<p>Index=
  <span id='para3'></span>
</p>
<p>
  a[index] :
  <span id='para'></span>
</p>

a more robust solution would be storing the arrays in an object :

var arrays = {
  arrayOne : ['mango', 'banana', 'pine', 'orange'],
  arrayTwo : ['adobe', 'microsoft', 'apple', 'yahoo'],
  arrayThree : ['england', 'china', 'nepal', 'japan', 'usa', 'india']
}

...

var b = arrays[a][index];

var arrays = {
 arrayOne : ['mango', 'banana', 'pine', 'orange'],
 arrayTwo : ['adobe', 'microsoft', 'apple', 'yahoo'],
 arrayThree : ['england', 'china', 'nepal', 'japan', 'usa', 'india']
}

function fun() {
  var index = document.getElementById('index').value;
  var name = document.getElementById('name').value;
  var a = 'array' + name;
  var b = arrays[a][index];
  document.getElementById('para').innerHTML = b;
  document.getElementById('para3').innerHTML = index;
  document.getElementById('para2').innerHTML = a;
}

p {
  border: 1px dotted black;
}

<!-- Try with One and 3 -->
Choose one,two,three,..,fifty:<br>
<input type='text' id='name'><br> Choose index:<br>
<input type='number' id='index'><br>
<input type='button' onclick='fun();' value='Go'>

<p>a=
  <span id='para2'></span>
</p>
<p>Index=
  <span id='para3'></span>
</p>
<p>
  a[index] :
  <span id='para'></span>
</p>

score 1 · Answer 2 · answered Apr 09 '18 at 19:16

To achieve expected result, make below changes to index and a variable

value from input is string, so change it to integer using parseInt

var index=parseInt(document.getElementById('index').value);
variable holds string format of array names , so get it from the window object, as it seems to be part of global object

var arrayOne=['mango','banana','pine'];
var arrayTwo=['adobe','microsoft','apple','yahoo'];
var arrayThree=['england','china','nepal','japan','usa','india'];
// suppose i have many more arrayFour,arrayFive,....,arrayFifty

function fun(){
var index=parseInt(document.getElementById('index').value);
var name=document.getElementById('name').value;
var a=window['array'+name];
console.log(index, a, a[index])
var b=a[index];
document.getElementById('para').innerHTML=b;
document.getElementById('para3').innerHTML=index;
document.getElementById('para2').innerHTML=a;

}

p{
  border:1px dotted black;
}

<!-- Try with One and 3 -->
Choose one,two,three,..,fifty:<br>
<input type='text' id='name'><br>
Choose index:<br>
<input type='number' id='index'><br>
<input type='button' onclick='fun();' value='Go'>

<p>a=
<span id='para2'></span>
</p>
<p>Index=
<span id='para3'></span>
</p>
<p>
a[index] :
<span id='para'></span>
</p>

 var a=window['array'+name];

code sample - https://codepen.io/nagasai/pen/qoLevR

Rahul Desai · Answer 3 · 2018-04-09T21:37:33.113

EDIT: Refer to Naga's answer above where window['array'+name] is being used. It is more scalable than the one below.

Original Answer:

Use switch cases instead:

var arrayOne = ['mango', 'banana', 'pine', 'orange'];
var arrayTwo = ['adobe', 'microsoft', 'apple', 'yahoo'];
var arrayThree = ['england', 'china', 'nepal', 'japan', 'usa', 'india'];
// suppose i have many more arrayFour,arrayFive,....,arrayFifty

function fun() {
  var index = document.getElementById('index').value;
  var name = document.getElementById('name').value;
  var a;
  switch (name) {
    case 'one':
      a = arrayOne;
      break;
      
    case 'two':
      a = arrayTwo;
      break;
      
    case 'three':
      a = arrayThree;
      break;
  };
  var b = a[index];
  document.getElementById('para').innerHTML = b;
  document.getElementById('para3').innerHTML = index;
  document.getElementById('para2').innerHTML = a;
}

p {
  border: 1px dotted black;
}

<!-- Try with One and 3 -->
Choose one,two,three,..,fifty:<br>
<input type='text' id='name'><br> Choose index:<br>
<input type='number' id='index'><br>
<input type='button' onclick='fun();' value='Go'>

<p>a=
  <span id='para2'></span>
</p>
<p>Index=
  <span id='para3'></span>
</p>
<p>
  a[index] :
  <span id='para'></span>
</p>

How efficient if you have 50 array, 50 switch cases? – indiPy Apr 09 '18 at 19:24 — indiPy, Apr 09 '18 at 19:24
@paragy I agree with you. Edited my answer now. – Rahul Desai Apr 09 '18 at 21:37 — Rahul Desai, Apr 09 '18 at 21:37

How to dynamically retrieve data from array where variable name comes from user input

3 Answers3