title: Javascript array with a mix of literals and arrays
body: <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 @Eli Courtwright, @17 of 26, 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>