How to access array if I get the name of the array from a selected option?

Question

I have a list of items:

<select id ="listSelector">
        <option value="books">Books</option>
        <option value="countries">Countries</option>
        <option value="states">States</option>
        <option value="presidents">Presidents</option>
</select>

Which correspond to arrays of items:

var books = ['genesis', 'exodus', 'leviticus', 'numbers'];
var countries = ['Akrotiri','Albania','Algeria','American'];
var states = ['Alabama','Alaska','Arizona','Arkansas'];
var presidents = ['Washington','Adams','Jefferson','Madison'];

I want to be able to select an item from the list and use the value of the item to select the correct array.

var listSelector = document.getElementById('listSelector');
var selectedList = listSelector.options[listSelector.selectedIndex].value;
console.log('selected', selectedList[0]); 
// returns first letter of the value of the list that was selected
// instead of the first item in the array.
// Ex. If I selected the Books option, the value would be 'books' 
// and I want to access the books array.

Use an object instead of separate variables var infos = { "books": [...], "countries": [...], ... }; infos[selectedValue] — Andreas
– Andreas, Commented Jul 12, 2016 at 15:32

adeneo · Accepted Answer · 2016-07-12 15:33:16Z

If you change the structure to an object instead, it would be quite easy

var stuff = {
  books      : ['genesis', 'exodus', 'leviticus', 'numbers'],
  countries  : ['Akrotiri', 'Albania', 'Algeria', 'American'],
  states     : ['Alabama', 'Alaska', 'Arizona', 'Arkansas'],
  presidents : ['Washington', 'Adams', 'Jefferson', 'Madison']
}

var listSelector = document.getElementById('listSelector');

listSelector.addEventListener('change', function() {

  var item_array = stuff[listSelector.value];
  document.getElementById('result').innerHTML = '<pre>' + JSON.stringify(item_array, 0, 4) + '</pre>';
  
}, false);

<select id="listSelector">
  <option value="books">Books</option>
  <option value="countries">Countries</option>
  <option value="states">States</option>
  <option value="presidents">Presidents</option>
</select>

<div id="result"></div>

user2033671 · Accepted Answer · 2016-07-12 15:47:37Z

If you do console.log('selected',selectedList) you will notice that it is the string value for the selected option. So doing selectedList[0] when the selected item is "book" will return "b" since using array index notation on strings returns the character for the given index.

Right now your lists (books,contries,states,presidents) are all stored on the global object. For browsers this is defined as window. So you can access any of your declared variables with.

window.book

But we can also use Strings to access properties like this

window['books']

So when we get the string representation for the variable name that we want we can access it like so

window[selectedList]

This will give us the target array and we can then access properties on it.

window[selectedList][0]

So if "book" was selected the above code would return "genesis". To get your original intended value of selected list we can break this process into two steps by creating an intermediate variable to store the name of the target list

var selectedListName = listSelector.options[listSelector.selectedIndex].value;
var selectedList = window[selectedListName]
console.log('selected', selectedList);

We can go one step further and create our own object to store all the lists instead of using the global window object.

var lists = {
  books : ['genesis', 'exodus', 'leviticus', 'numbers'],
  countries : ['Akrotiri', 'Albania', 'Algeria', 'American'],
  states : ['Alabama', 'Alaska', 'Arizona', 'Arkansas'],
  presidents : ['Washington', 'Adams', 'Jefferson', 'Madison']
}

var listSelector = document.getElementById('listSelector');
var selectedListName = listSelector.options[listSelector.selectedIndex].value;
var selectedList = lists[selectedListName]
console.log('selected', selectedList);

<select id="listSelector">
  <option value="books">Books</option>
  <option value="countries">Countries</option>
  <option value="states">States</option>
  <option value="presidents">Presidents</option>
</select>

Collectives™ on Stack Overflow

How to access array if I get the name of the array from a selected option?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related