tableau JavaScript avec un mélange de littéraux et les tableaux

Question

je peux créer ce qui suit et font référence à l'aide

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

Comment pourrais-je restructurer « zone » de sorte que si je connais le nom de l'État, je peux l'utiliser dans une référence pour obtenir le tableau des villes?

Merci

EDIT Toute tentative de mettre en œuvre les réponses que je recevais (merci @Eli Courtwright, @ 17 de 26 et @JasonBunting) Je me rends compte que ma question était incomplète. J'ai besoin de faire une boucle sur "area" la première fois en référençant "state" par index, puis quand j'ai la sélection de "state", j'ai besoin de revenir en arrière dans une structure en utilisant la valeur de "state" villes". Je veux commencer par la structure ci-dessus (bien que je sois libre de la construire comme je veux) et cela ne me dérange pas une conversion similaire à la réponse de @ eli (bien que je n'ai pas réussi à obtenir cette conversion). Aurait dû être plus complète dans la première question. Essayer d'implémenter 2 boîtes de sélection où la sélection de la première remplit la seconde ... Je chargerai cette structure de tableau dans un fichier js quand la page se chargera.

Answer 1

Si vous voulez créer juste cette façon de commencer, dites

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

et ainsi de suite. Si vous vous demandez comment prendre un objet existant et le convertir en cela, juste dire

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

Après avoir exécuté le code ci-dessus, vous pouvez dire

states["Texas"] 

qui retournerait

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

Answer 2

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

Ensuite, vous pouvez faire:

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

Answer 3

Cela vous donne le tableau des villes en fonction de connaître le nom de l'État:

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

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

Answer 4

(Avec l'aide des réponses, je suis arrivé que cela fonctionne comme je le voulais. Je fixe la syntaxe en réponse choisie, dans le code ci-dessous)

Avec les boîtes de sélection suivantes

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

et des données dans ce format (soit dans le fichier .js ou reçus comme JSON)

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

Ces fonctions JQuery rempliront la zone de sélection de la ville en fonction de la sélection de la boîte de sélection d'état

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