Shorten my jquery code using array?

Question

I have this script (modified devbridge autocomplete script) that is working properly but it has a ridiculously long code that looks very ugly, i am not a professional programmer so please bear with me, i'm hoping that somehow i can make it shorter using array but im not sure how to implement im not even sure if array is the solution either lol. On my script i fetch 2 values from a 2 variables, $msB variable is assigned for Branch Name followed by a number and $msT for Branch Telephone number of course its followed by a number as well. So if its branch1 it should be $msB1 and $msT1and. Here is my code:

<script>
$msB1 = branch_name1;
$msB2 = branch_name2;
$msB3 = branch_name3;
$msB4 = branch_name4;
$msB5 = branch_name5;
$msB6 = branch_name6;
$msB7 = branch_name7;
$msB8 = branch_name8;
$msB9 = branch_name9;
$msB10 = branch_name10;
$msB11 = branch_name11;
$msB12 = branch_name12;
$msB13 = branch_name13;
$msB14 = branch_name14;
$msB15 = branch_name15;
$msB16 = branch_name16;
$msB17 = branch_name17;
$msB18 = branch_name18;
$msB19 = branch_name19;
$msB20 = branch_name20;
$msB21 = branch_name21;
$msB22 = branch_name22;
$msB23 = branch_name23;
$msB24 = branch_name24;
$msB25 = branch_name25;
$msB26 = branch_name26;
$msB27 = branch_name27;
$msB28 = branch_name28;
$msB29 = branch_name29;
$msB30 = branch_name30;
$msB31 = branch_name31;
$msB32 = branch_name32;
$msB33 = branch_name33;
$msB34 = branch_name34;
$msB35 = branch_name35;
$msB36 = branch_name36;
$msB37 = branch_name37;
$msB38 = branch_name38;
$msB39 = branch_name39;
$msB40 = branch_name40;
$msB41 = branch_name41;
$msB42 = branch_name42;
$msB43 = branch_name43;
$msB44 = branch_name44;
$msB45 = branch_name45;
$msB46 = branch_name46;
$msB47 = branch_name47;
$msB48 = branch_name48;
$msB49 = branch_name49;
$msB50 = branch_name50;
$msT1 = branch_tel1;
$msT2 = branch_tel2;
$msT3 = branch_tel3;
$msT4 = branch_tel4;
$msT5 = branch_tel5;
$msT6 = branch_tel6;
$msT7 = branch_tel7;
$msT8 = branch_tel8;
$msT9 = branch_tel9;
$msT10 = branch_tel10;
$msT11 = branch_tel11;
$msT12 = branch_tel12;
$msT13 = branch_tel13;
$msT14 = branch_tel14;
$msT15 = branch_tel15;
$msT16 = branch_tel16;
$msT17 = branch_tel17;
$msT18 = branch_tel18;
$msT19 = branch_tel19;
$msT20 = branch_tel20;
$msT21 = branch_tel21;
$msT22 = branch_tel22;
$msT23 = branch_tel23;
$msT24 = branch_tel24;
$msT25 = branch_tel25;
$msT26 = branch_tel26;
$msT27 = branch_tel27;
$msT28 = branch_tel28;
$msT29 = branch_tel29;
$msT30 = branch_tel30;
$msT31 = branch_tel31;
$msT32 = branch_tel32;
$msT33 = branch_tel33;
$msT34 = branch_tel34;
$msT35 = branch_tel35;
$msT36 = branch_tel36;
$msT37 = branch_tel37;
$msT38 = branch_tel38;
$msT39 = branch_tel39;
$msT40 = branch_tel40;
$msT41 = branch_tel41;
$msT42 = branch_tel42;
$msT43 = branch_tel43;
$msT44 = branch_tel44;
$msT45 = branch_tel45;
$msT46 = branch_tel46;
$msT47 = branch_tel47;
$msT48 = branch_tel48;
$msT49 = branch_tel49;
$msT50 = branch_tel50;

$(function(){
  var areas = [
    { value: '".$msB1."', data: '".$msT1."' },
{ value: '".$msB2."', data: '".$msT2."' },
{ value: '".$msB3."', data: '".$msT3."' },
{ value: '".$msB4."', data: '".$msT4."' },
{ value: '".$msB5."', data: '".$msT5."' },
{ value: '".$msB6."', data: '".$msT6."' },
{ value: '".$msB7."', data: '".$msT7."' },
{ value: '".$msB8."', data: '".$msT8."' },
{ value: '".$msB9."', data: '".$msT9."' },
{ value: '".$msB10."', data: '".$msT10."' },
{ value: '".$msB11."', data: '".$msT11."' },
{ value: '".$msB12."', data: '".$msT12."' },
{ value: '".$msB13."', data: '".$msT13."' },
{ value: '".$msB14."', data: '".$msT14."' },
{ value: '".$msB15."', data: '".$msT15."' },
{ value: '".$msB16."', data: '".$msT16."' },
{ value: '".$msB17."', data: '".$msT17."' },
{ value: '".$msB18."', data: '".$msT18."' },
{ value: '".$msB19."', data: '".$msT19."' },
{ value: '".$msB20."', data: '".$msT20."' },
{ value: '".$msB21."', data: '".$msT21."' },
{ value: '".$msB22."', data: '".$msT22."' },
{ value: '".$msB23."', data: '".$msT23."' },
{ value: '".$msB24."', data: '".$msT24."' },
{ value: '".$msB25."', data: '".$msT25."' },
{ value: '".$msB26."', data: '".$msT26."' },
{ value: '".$msB27."', data: '".$msT27."' },
{ value: '".$msB28."', data: '".$msT28."' },
{ value: '".$msB29."', data: '".$msT29."' },
{ value: '".$msB30."', data: '".$msT30."' },
{ value: '".$msB31."', data: '".$msT31."' },
{ value: '".$msB32."', data: '".$msT32."' },
{ value: '".$msB33."', data: '".$msT33."' },
{ value: '".$msB34."', data: '".$msT34."' },
{ value: '".$msB35."', data: '".$msT35."' },
{ value: '".$msB36."', data: '".$msT36."' },
{ value: '".$msB37."', data: '".$msT37."' },
{ value: '".$msB38."', data: '".$msT38."' },
{ value: '".$msB39."', data: '".$msT39."' },
{ value: '".$msB40."', data: '".$msT40."' },
{ value: '".$msB41."', data: '".$msT41."' },
{ value: '".$msB42."', data: '".$msT42."' },
{ value: '".$msB43."', data: '".$msT43."' },
{ value: '".$msB44."', data: '".$msT44."' },
{ value: '".$msB45."', data: '".$msT45."' },
{ value: '".$msB46."', data: '".$msT46."' },
{ value: '".$msB47."', data: '".$msT47."' },
{ value: '".$msB48."', data: '".$msT48."' },
{ value: '".$msB49."', data: '".$msT49."' },
{ value: '".$msB50."', data: '".$msT50."' },    
  ];

  $('#autocomplete.autocomplete({
    lookup: areas,
    onSelect: function (suggestion) {               
      var thehtml = '<a href=\"tel:+63'+ suggestion.data +'\">' + suggestion.data + '</a><div>' + suggestion.value + ' branch found</div>';
      $('#outputcontent.html(thehtml);
    }
  });

});
</script>

and to output the above script this is the code

<div id="searchfield">
        <form><input type="text" name="areas" class="biginput" id="autocomplete"></form>
      </div>     
    <div>
        <p id="outputcontent">  
        </p>        
    </div>

again the script is working i just want to find a way to make the script shorter after the difference between variables are just numbers

I hope i have explained it well and i am hoping that someone can help me as well :D

thanks a lot

Answer 1

Well, one possible idea I can think of, though not the safest one is generating your code as a string using a function, and then evaluate it (using "eval").

an example for the first part would be:

function declareVars(varPrefix, varStart, varEnd, valuePrefix, valueStart){
 var declaration = '', nextVar = '';
 for (var i = varStart; i <= varEnd; i++){
  nextVar = (varPrefix + i + ' = ' + valuePrefix + valueStart + ';\n');
  valueStart ++; 
  declaration += nextVar; 
 }
 return declaration; 
}


var finalStatement = 
 declareVars('$msB', 1, 50, 'branch_name', 1) + 
 declareVars('$msT', 1, 50, 'branch_tel', 1); 

console.log(finalStatement); //replace this with: eval(finalStatement)

But keep in mind that this approach has many caveats, you can read more here:

Why is using the JavaScript eval function a bad idea?

Is Javascript eval() so dangerous?

However, there are ways to protect yourself against the security flaws of "eval" - using anonymous functions to hide your scope and others.

Answer 2

What your'e actually asking is, can you create variables dynamically. Fortunately The answer is yes :)

One possible solution is to use "eval", but it has a long list of disadvantages. I would recommend, try to change your codes structure to save all of the variables as keys in a JSON object. creating object keys dynamically is easy and safe, and as simple as:

allBranches = {
 branch_name1: 'some data 1' , 
 branch_name2: 'some data 2' , 
 branch_name3: 'some data 3' , 
 // etc...
}
var myData = {}; 
for (var i = 1; i < Object.keys(allBranches).length; i++){
 myData['$msB' + i] = allBranches['branch_name' + i];
}