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

[{'answer_id': 57531, 'author': 'Eli Courtwright', 'author_id': 1694, 'author_profile': 'https://Stackoverflow.com/users/1694', 'pm_score': 2, 'selected': True, 'text': '<p>If you want to just create it that way to begin with, just say</p>\n\n<pre><code>area = {\n    "Texas": [\'Austin\',\'Dallas\',\'San Antonio\']\n}\n</code></pre>\n\n<p>and so on.  If you\'re asking how to take an existing object and convert it into this, just say</p>\n\n<pre><code>states = {}\nfor(var j=0; j&lt;area.length; j++)\n    states[ area[0].State ] = area[0].Cities\n</code></pre>\n\n<p>After running the above code, you could say</p>\n\n<pre><code>states["Texas"]\n</code></pre>\n\n<p>which would return</p>\n\n<pre><code>[\'Austin\',\'Dallas\',\'San Antonio\']\n</code></pre>\n'}, {'answer_id': 57535, 'author': '17 of 26', 'author_id': 2284, 'author_profile': 'https://Stackoverflow.com/users/2284', 'pm_score': 2, 'selected': False, 'text': '<pre><code>var area = \n{\n    "Texas" : { "Cities"  : [\'Austin\',\'Dallas\',\'San Antonio\'] },\n    "Arkansas" : { "Cities"  : [\'Little Rock\',\'Texarkana\',\'Hot Springs\'] }\n};\n</code></pre>\n\n<p>Then you can do:</p>\n\n<pre><code>area["Texas"].Cities[0];\n</code></pre>\n'}, {'answer_id': 57536, 'author': 'Jason Bunting', 'author_id': 1790, 'author_profile': 'https://Stackoverflow.com/users/1790', 'pm_score': 1, 'selected': False, 'text': '<p>This would give you the array of cities based on knowing the state\'s name:</p>\n\n<pre><code>var area = {\n   "Texas" : ["Austin","Dallas","San Antonio"], \n   "Arkansas" : ["Little Rock","Texarkana","Hot Springs"]\n};\n\n// area["Texas"] would return ["Austin","Dallas","San Antonio"]\n</code></pre>\n'}, {'answer_id': 58062, 'author': 'Jay Corbett', 'author_id': 2755, 'author_profile': 'https://Stackoverflow.com/users/2755', 'pm_score': 2, 'selected': False, 'text': '<p>(With help from the answers, I got this to work like I wanted. I fixed the syntax in selected answer, in the below code)</p>\n\n<p>With the following select boxes</p>\n\n<pre><code>&lt;select id="states" size="2"&gt;&lt;/select&gt;\n&lt;select id="cities" size="3"&gt;&lt;/select&gt;\n</code></pre>\n\n<p>and data in this format (either in .js file or received as JSON)</p>\n\n<pre><code>var area = [\n    {\n     "states"   : "Texas",\n     "cities"  : [\'Austin\',\'Dallas\',\'San Antonio\']\n    },\n    {\n     "states"   :"Arkansas",\n     "cities"  : [\'Little Rock\',\'Texarkana\',\'Hot Springs\']\n    }\n   ] ;\n</code></pre>\n\n<p>These JQuery functions will populate the city select box based on the state select box selection</p>\n\n<pre><code>$(function() {      // create an array to be referenced by state name\n state = [] ;\n for(var i=0; i&lt;area.length; i++) {\n  state[area[i].states] = area[i].cities ;\n }\n});\n\n$(function() {\n // populate states select box\n var options = \'\' ;\n for (var i = 0; i &lt; area.length; i++) {\n  options += \'&lt;option value="\' + area[i].states + \'"&gt;\' + area[i].states + \'&lt;/option&gt;\'; \n }\n $("#states").html(options);   // populate select box with array\n\n // selecting state (change) will populate cities select box\n $("#states").bind("change",\n   function() {\n    $("#cities").children().remove() ;      // clear select box\n    var options = \'\' ;\n    for (var i = 0; i &lt; state[this.value].length; i++) { \n     options += \'&lt;option value="\' + state[this.value][i] + \'"&gt;\' + state[this.value][i] + \'&lt;/option&gt;\'; \n    }\n    $("#cities").html(options);   // populate select box with array\n   }        // bind function end\n );         // bind end \n});\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/57522', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2755/']