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?

JLRishe · Accepted Answer · 2014-11-20 17:47:01Z

4

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).

answered Nov 20, 2014 at 17:47

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arkanoid Over a year ago

I'm still getting Uncaught TypeError: Cannot read property '0' of undefined.

JLRishe Over a year ago

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 Over a year ago

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!

mc01 · Accepted Answer · 2014-11-20 18:55:00Z

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".

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related