Matriz de Javascript con una combinación de literales y matrices

Question

Puedo crear lo siguiente y hacer referencia a él usando

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

¿Cómo podría reestructurar el "área" de modo que, si sé el nombre del estado, pueda usarlo como referencia para obtener la variedad de ciudades?

Gracias

EDITAR Al intentar implementar con las respuestas que recibí (gracias @Eli Courtwright, @17 de 26 y @JasonBunting), me doy cuenta de que mi pregunta estaba incompleta.Necesito recorrer el "área" la primera vez que hago referencia a "estado" por índice, luego, cuando tengo la selección del "estado", necesito recorrer una estructura usando el valor de "estado" para obtener el "estado" asociado. ciudades".Quiero comenzar con la estructura anterior (aunque soy libre de construirla como quiera) y no me importa una conversión similar a la respuesta de @eli (aunque no pude hacer que esa conversión funcionara).Debería haber sido más completo en la primera pregunta.Intentando implementar 2 cuadros de selección donde la selección del primero completa el segundo... Cargaré esta estructura de matriz en un archivo js cuando se cargue la página.

Answer 1

Si desea crearlo de esa manera para empezar, simplemente diga

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

etcétera.Si preguntas cómo tomar un objeto existente y convertirlo en esto, solo di

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

Después de ejecutar el código anterior, se podría decir

states["Texas"]

cual volveria

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

Answer 2

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

Entonces puedes hacer:

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

Answer 3

(Con la ayuda de las respuestas, logré que esto funcionara como quería.Arreglé la sintaxis en la respuesta seleccionada, en el siguiente código)

Con las siguientes casillas de selección

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

y datos en este formato (ya sea en un archivo .js o recibido como JSON)

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

Estas funciones de JQuery completarán el cuadro de selección de ciudad según la selección del cuadro de selección de estado.

$(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 
});

Answer 4

Esto le daría la variedad de ciudades basándose en conocer el nombre del estado:

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

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