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.

17 of 26 · Accepted Answer · 2008-09-11 20:27:53Z

2

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

Then you can do:

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

answered Sep 11, 2008 at 20:27

17 of 26

27.5k14 gold badges69 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jay Corbett · Accepted Answer · 2008-09-12 01:02:32Z

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

Eli Courtwright · Accepted Answer · 2008-09-11 20:26:52Z

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

answered Sep 11, 2008 at 20:26

Eli Courtwright

195k69 gold badges224 silver badges257 bronze badges

Comments

Jason Bunting · Accepted Answer · 2008-09-11 20:28:23Z

1

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

answered Sep 11, 2008 at 20:28

Jason Bunting

59.1k16 gold badges105 silver badges94 bronze badges

Collectives™ on Stack Overflow

Javascript array with a mix of literals and arrays

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related