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
– j. dot, Commented Apr 9, 2018 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
– Stefan Octavian, Commented Apr 9, 2018 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
– Xotic750, Commented Apr 9, 2018 at 19:19
Possible duplicate of Use dynamic variable names in JavaScript — Heretic Monkey
– Heretic Monkey, Commented Apr 9, 2018 at 19:22

Taki · Accepted Answer · 2018-04-09 19:25:29Z

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>

Naga Sai A · Accepted Answer · 2018-04-09 19:16:58Z

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 · Accepted Answer · 2018-04-09 21:37:33Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Linked

Related