JQuery array, accessed through a variable?

Question

Im trying to populate a select (with the values from an array) depending on the option they select from the first dropdown

I have the arrays in my function, like so:

residential = ["R1_:_Single_Private_Dwelling","CH1_:_Self-Catering_Holiday_Unit","R2_:_Flats_or_Maisonettes_Up_to_3_floors_Purpose_Built","R3_:_Flats_or_Maisonettes_4_floors_and_over_Purpose_Built","CC7_:_Time_Share_Complex","R4_:_Houses_Converted_to_Flats_Up_to_2_Floors","R5_:_Houses_Converted_to_Flats_3_floors_and_over","MR_:_Hostel","R6_:_HMO","CC_:_Camping_Site","CC1_:_Caravan_Park","CC5_:_Chalet_Park","CC6_:_Caravan_And_Chalet_Park_","CC_:_Gypsy_Caravan_Site","XX1_:_Other"]; institutionalVal = ["MH2_:_Hospital","MH3_:_Hospital_(private)","MR1_:_(Care)_Home_for_older_people_(Over_65)","MR2_:_(Care)_home_for_adult_placements_"];

The user is selecting from a dropdown, with an ID of 'residential' for example and I want to populate a second select with the values from the array above.

So I'm grabbing the ID of the selected option, like so:

var org_cat = $(this).children(":selected").attr("id");

So, the value of org_cat for example would be 'residential', so I'm thinking i can just try and iterate through this as the array is called 'residential'

So I'm trying to loop through the array as below:

$.each(org_cat, function(value) {
 $('#area_usage')
 .append($("<option></option>")
 .attr("value", value)
 .text(value));
});

BUT, the variable 'org_cat' is not being seen as the array.

What am i doing wrong, do I have to tell JQuery that its an array somehow?

This is the error I'm getting.

TypeError: invalid 'in' operand a

• Luca Giardina: org_cat isn't an array, right?
• frobak: no, im trying to use it to reference an array]
• Luca Giardina: so you have a multi select with multiple options selected?
• frobak: Nope, im trying to populate a select (with the values from an array) depending on the option they select from the first dropdown.

Answer 1

What you are trying to do is referencing the variable "residential" (that is an array) by using a string. So for that you can have an object like:

var org_cat = $(this).children(":selected").attr("id"); // = "residential"
var obj =
{
 "residential": ["R1_:_Single_Private_Dwelling","CH1_:_Self-Catering_Holiday_Unit","R2_:_Flats_or_Maisonettes_Up_to_3_floors_Purpose_Built","R3_:_Flats_or_Maisonettes_4_floors_and_over_Purpose_Built","CC7_:_Time_Share_Complex","R4_:_Houses_Converted_to_Flats_Up_to_2_Floors","R5_:_Houses_Converted_to_Flats_3_floors_and_over","MR_:_Hostel","R6_:_HMO","CC_:_Camping_Site","CC1_:_Caravan_Park","CC5_:_Chalet_Park","CC6_:_Caravan_And_Chalet_Park_","CC_:_Gypsy_Caravan_Site","XX1_:_Other"]; institutionalVal = ["MH2_:_Hospital","MH3_:_Hospital_(private)","MR1_:_(Care)_Home_for_older_people_(Over_65)","MR2_:_(Care)_home_for_adult_placements_"];
}

And get the array "residential" thought referencing the index in the object like:

obj[org_cat]

So on the jQuery each:

$.each(obj[org_cat], function(value) {
 $('#area_usage')
 .append($("<option></option>")
 .attr("value", value)
 .text(value));
});

Or if your variable "residential" is global, you can refer it through window object like window[org_cat] instead of obj[org_cat]

• frobak: Thanks. I had to add the key into the function as it was just returning the key instead of the value. $.each(obj[org_cat], function(key,value)