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 inplete. 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 plete 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.
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 inplete. 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 plete 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.
Share Improve this question edited Sep 12, 2008 at 1:03 Jay Corbett asked Sep 11, 2008 at 20:22 Jay CorbettJay Corbett 28.4k21 gold badges58 silver badges74 bronze badges4 Answers
Reset to default 2var area =
{
"Texas" : { "Cities" : ['Austin','Dallas','San Antonio'] },
"Arkansas" : { "Cities" : ['Little Rock','Texarkana','Hot Springs'] }
};
Then you can do:
area["Texas"].Cities[0];
(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
});
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']
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"]