Javascript array with a mix of literals and arrays

Question

I can create the following and reference it using

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']
        }
       ] ;

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?

Thanks

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

Answer 1

If you want to just create it that way to begin with, just say

area = {
    "Texas": ['Austin','Dallas','San Antonio']
}

and so on. If you're asking how to take an existing object and convert it into this, just say

states = {}
for(var j=0; j<area.length; j++)
    states[ area[0].State ] = area[0].Cities

After running the above code, you could say

states["Texas"]

which would return

['Austin','Dallas','San Antonio']

Answer 2

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

Then you can do:

area["Texas"].Cities[0];

Answer 3

This would give you the array of cities based on knowing the state's name:

var area = {
   "Texas" : ["Austin","Dallas","San Antonio"], 
   "Arkansas" : ["Little Rock","Texarkana","Hot Springs"]
};

// area["Texas"] would return ["Austin","Dallas","San Antonio"]

Answer 4

(With help from the answers, I got this to work like I wanted. I fixed the syntax in selected answer, in the below code)

With the following select boxes

<select id="states" size="2"></select>
<select id="cities" size="3"></select>

and data in this format (either in .js file or received as JSON)

var area = [
    {
     "states"   : "Texas",
     "cities"  : ['Austin','Dallas','San Antonio']
    },
    {
     "states"   :"Arkansas",
     "cities"  : ['Little Rock','Texarkana','Hot Springs']
    }
   ] ;

These JQuery functions will populate the city select box based on the state select box selection

$(function() {   // create an array to be referenced by state name
 state = [] ;
 for(var i=0; i<area.length; i++) {
  state[area[i].states] = area[i].cities ;
 }
});

$(function() {
 // populate states select box
 var options = '' ;
 for (var i = 0; i < area.length; i++) {
  options += '<option value="' + area[i].states + '">' + area[i].states + '</option>'; 
 }
 $("#states").html(options);   // populate select box with array

 // selecting state (change) will populate cities select box
 $("#states").bind("change",
   function() {
    $("#cities").children().remove() ;  // clear select box
    var options = '' ;
    for (var i = 0; i < state[this.value].length; i++) { 
     options += '<option value="' + state[this.value][i] + '">' + state[this.value][i] + '</option>'; 
    }
    $("#cities").html(options);   // populate select box with array
   }     // bind function end
 );      // bind end 
});