create dynamic variable inside for loop to access array

Question

I have multiple arrays which has same prefix name.

 var region1 = ['01','02','03','04','05','06','07'];
 var region2 = ['08','09','11','12'];
 var region3 = ['13'];
 var region4 = ['14','22'];
 var region5 = ['10','15','16','17','18','19','20'];
 var region6 = ['21','23','24'];
 var region7 = ['25','26','27','28','29','30'];
 var region8 = ['31','33','36','37','38','39'];
 var region9 = ['32','34','35','40','41','42','43','44','45','46','47'];
 var prefecture = "33";

Based on prefecture value I want to display regions

 if(region1.indexOf(prefecture) != -1){
 $('.region1').show();
 $('a.region1').addClass('regionSelect');
 }
 else if(region2.indexOf(prefecture) != -1){
 $('.region2').show();
 $('a.region2').addClass('regionSelect');
 }
 else if(region3.indexOf(prefecture) != -1){
 $('.region3').show();
 $('a.region3').addClass('regionSelect');
 }
 else if(region4.indexOf(prefecture) != -1){
 $('.region4').show();
 $('a.region4').addClass('regionSelect');
 }
 else if(region5.indexOf(prefecture) != -1){
 $('.region5').show();
 $('a.region5').addClass('regionSelect');
 }
 else if(region6.indexOf(prefecture) != -1){
 $('.region6').show();
 $('a.region6').addClass('regionSelect');
 }
 else if(region7.indexOf(prefecture) != -1){
 $('.region7').show();
 $('a.region7').addClass('regionSelect');
 }
 else if(region8.indexOf(prefecture) != -1){
 $('.region8').show();
 $('a.region8').addClass('regionSelect');
 }

which is working fine

But I am tried like this to minimize the code.

 for(var i=1; i<=9; i++){
 if('region'+i.indexOf(prefecture) != -1){
 $('.region'+i).show();
 $('.region'+i).addClass('regionSelect');
 }
 }

It says i.indexOf is not defined

Answer 1

Use an array instead of variables.

var regions = [
 ['01','02','03','04','05','06','07'],
 ['08','09','11','12'],
 // and so on
]

then select by index

for(var i=0; i<9; i++){
 if(regions[i].indexOf(prefecture) != -1){
 $('.region'+(i+1)).show()
 .addClass('regionSelect');
 }
}

• Felix Kling: The OP uses .regionX and a.regionX as selectors in the first example. They might not refer to the same elements.
• the system: @FelixKling: True. I based the selection off of the refactored example in the question where the a is excluded.
• Swathi: Thanks a lot. looks very clean and perfect

Answer 2

I have seen so many questions on here where people try to use "dynamic variable" names when there are already other wonderful data structures such as the Array and Object available for serving this exact purpose.

var region = {
 "1": ['01','02','03','04','05','06','07'],
 "2": ['08','09','11','12'],
 "3": ['13'],
 /* snip */
};

---

for(var i=1; i<=9; i++){
 if(region[i].indexOf(prefecture) != -1){
 $('.region'+i).show();
 $('.region'+i).addClass('regionSelect');
 }
}

If you absolutely must use dynamic variable names, you can't do it with var. You could do it if they were global (on window) and then access them via window['region' + i]. I do not recommend this at all.

Answer 3

You need to refer to the object the variables are attached to using the [] syntax to refer to it's children, you can try with window if they are in the global scope...

for(var i=1; i<=9; i++){
 if(window['region'+i].indexOf(prefecture) != -1){
 $('.region'+i).show();
 $('.region'+i).addClass('regionSelect');
 }
}

Otherwise, I expect this['region'+i].indexOf etc... would work also

Answer 4

Precedence problems.

You need to write

('region'+i).indexOf(prefecture)

otherwise it is understood as

'region'+(i.indexOf(prefecture))

As FelixKling notes below, this fixes the syntax error, but will not work, because you'd be looking for the prefecture inside the string "region1" etc. Check other answers to see how to really code this.

• Felix Kling: I can already tell you that this will always return -1, because the string regionX will never contain the value of prefecture.
• Amadan: @FelixKling: ... Doh. I was addressing the literal error, there's still the logical error behind it...