Optimise JavaScript loop I have this code:

Tabzilla.fillZGContacts = function(){
   if (!Tabzilla.panel.id) return;
   $.ajax({
       url: 'zgcontacts.json',
      success: function(d){   // "Type","Name","Link","Contact","Location","Icon"
        Tabzilla.zgContacts = d;
        var countries = [];
        d.rows.forEach(function(row){
          if (row[0] == 'Country') countries.push(
            {link:row[2], contact:row[3], country: row[4]}
          );     
        });

        //alphabetically
        countries.sort(sortByKey('country'));

        //adding link 
        countryTemplate = function (country){
          s = '&lt;a title="'+country.country+'" class="chapters_link" href="'
          +country.link+'" target="_blank"&gt;'
      +'&lt;div class="chapters c_'+country.country.toLowerCase()+'"&gt;'
        +'&lt;span class="flag-margin"&gt;'+country.country+'&lt;/span&gt;&lt;/div&gt;&lt;/a&gt;' 
        return s;
        }


        var byletter = {};

        //count countries starting from each letter
        countries.forEach(function(c){        
          var firstletter = c.country.toLowerCase().charAt(0);
          if (byletter[firstletter]) byletter[firstletter]++;
          else byletter[firstletter]=1;
        });
        console.log(byletter);
        //prepare containers
        var panel = $("#"+Tabzilla.panel.id);
        var $cols = []; 

        $cols.push(panel.find(".c_COL4"));
        $cols.push(panel.find(".c_COL3"));
        $cols.push(panel.find(".c_COL2"));
        $cols.push(panel.find(".c_COL1"));
        var columns = $cols.length;        
        var targetlen = countries.length/columns;

        var FirstLetter = countries[0].country.toLowerCase().charAt(0);
        var cc = [];

        //fill containers. this loop is buggy. should be reviewed.
        countries.forEach(function(c){
          var newFirstLetter = c.country.toLowerCase().charAt(0);
          if (FirstLetter != newFirstLetter)
          {

             var l1 = cc.length;
             var l2 = l1 + byletter[newFirstLetter];
             //condition maybe shd be changed..

             if (Math.abs(l2-targetlen) &gt;= Math.abs(l1-targetlen)){
               var $col;
               if ($cols.length&gt;0) $col = $cols.pop();
               cc.forEach(function(c){
                 $col.append(countryTemplate(c));
               });
               cc=[];

               //does not work :(
               //could generate another template with first letter raised
               $col.find('span').first().addClass("first-letter");
             }
             cc.push(c);
          }
          else cc.push(c);
          FirstLetter = newFirstLetter;
        });

      },
   });
}


The zgcontacts.json file can be found here.

Any pointers in optimizing this is much appreciated.  For example, this loop:

countries.forEach(function(c)
Use braces { in all your if blocks. It makes it easier to read.

if (byletter[firstletter]){
    byletter[firstletter]++;
}else{
    byletter[firstletter]=1;
}


You have for loops like : countries.forEach(function(c){ which are also hard to read. I'd only use this if you have a function you want to apply. 

for(var countryindex = 0; countryindex &lt; countries.length; countryindex++)
{
    var c = countries[countryindex];
    // ...
}


Use descriptive variable names. 

if (FirstLetter != newFirstLetter)
{
    var l1 = cc.length;
    var l2 = l1 + byletter[newFirstLetter];


What is l1 &amp; l2 ? What is c or cc?