Javascript to access an Array in an Array with an input variable

Question

I'm developing a form that processes input information differently depending on the State the user is in. On my webpage I have a list of States in a drop down:

<div class="top-row" title="Select the proper state from the list."> <select name="state-list" class="state-list" id="stateList" > <option value=30>Select State</option> <option value=0>AL</option> <option value=1>AR</option> <option value=2>CA</option> <option value=3>CT</option> <option value=4>DE</option> <option value=5>DC</option> <option value=6>GA</option> </select> </div>

In my javascript file I made an array called states and placed the States as arrays:

var state = { AL: [false, true, true, 0], AZ: [false, false, false, 0],
AR: [false, true, true, 0], CA: [false, false, false, 0], 
CT: [false, true, true, 0], DE: [false, true, true, 0],
DC: [false, true, true, 0], GA: [false, true, true, 0]};

The problem I'm having is finding the array value. I've done a lot of searching, but I'm just not finding a solution.

findState = document.getElementById('stateList').value;
console.log(state.findState[0]);

They all return undefined, but 'findState' has a value. How can I access the values of the specific State's array within the state array?

Answer 1

Your expression is trying to access the findState property on the state object, and it has no property named findState. Instead, use bracket notation:

console.log(state[findState][0]);

Also, don't forget to do proper null/undefined checks to account for the possibility that the value could not be found (e.g. if the user re-selects the first option in the dropdown).

• Arkanoid: I'm still getting Uncaught TypeError: Cannot read property '0' of undefined.
• JLRishe: That's because your select control will have the values 0, 1, 2, 3 (because that's what you provided in the value= attributes), while your state object has properties named AL, AZ, AR, etc. Can you change your <option> elements to use the state abbreviations instead of numbers?
• Arkanoid: Yah know, I had them set to the State values to begin with, but I couldn't get it to work; so I removed them all and set the values to numerical. I just tried your solution however, and it's working. Guess I didn't try state[findState][0]; before. Thank you very much!

Answer 2

You didn't make an array ([]) called state, you made an object ({}) called state.

In it, each "state" abbreviation is the key & the array of true/false options is the value.

Objects make no guarantee about the order of their contents, so you can't search them by numeric index. You can either rework state to actually be an Array of objects, or rework how you access the values.

findState isn't returning the expected value. You first need to check the selected index, then get either the value property (numeric value attr) or the text.

var stateList = document.getElementById('stateList'); //the whole list in the DOM
var selectedState = stateList.options[stateList.selectedIndex]; //whichever one is selected
var numericValue = selectedState.value //value='#'
var textAbbrev = selectedState.text //"AR" , "AZ", etc

With an object using the abbreviations as the "key" you want .text

var optionsArray = state.textAbbrev //should give you the entire array for selected state 
console.log(optionsArray[0]); //should show the 1st true/false value in the selected state's array.

Also, your HTML is missing "AZ".