Javascript array with a mix of literals and arrays
<p>I can create the following and reference it using</p>

<pre><code>area[0].states[0] 
area[0].cities[0]

var area = [
        {
         "State"   : "Texas",
         "Cities"  : ['Austin','Dallas','San Antonio']
        },
        {
         "State"   :"Arkansas",
         "Cities"  : ['Little Rock','Texarkana','Hot Springs']
        }
       ] ;
</code></pre>

<p>How could I restructure "area" so that if I know the name of the state, I can use it in a reference to get the array of cities?</p>

<p>Thanks</p>

<p><strong>EDIT</strong> Attempting to implement with the answers I received (thanks @<a href="#57531" rel="nofollow">Eli Courtwright</a>, @<a href="#57535" rel="nofollow">17 of 26</a>, and @JasonBunting) I realize my question was incomplete. I need to loop through "area" the first time referencing "state" by index, then when I have the selection of the "state", I need to loop back through a structure using the value of "state" to get the associated "cities". I do want to start with the above structure (although I am free to build it how I want) and I don't mind a conversion similar to @eli's answer (although I was not able to get that conversion to work). Should have been more complete in first question. Trying to implement 2 select boxes where the selection from the first populates the second...I will load this array structure in a js file when the page loads.</p>
