Why doesn't my code append to the string within the loop?

Question

I'm using jQuery, building a table through a loop. I thought the best way of doing this would be to create an array then do $(blah).html(table);

var settings_table = '<open the table>';
  $.each(settings, function(i, val){
    var settings_table = settings_table+'<put stuff in it>';
  });
  var settings_table = settings_table+'<close it>';
  $('#rscc_opts').html(settings_table);

But this isn't working. I'm assuming I'm doing it wrong. Or could you suggest a better solution? My array is formed like:

var settings = [
  {
    var1: 'foo',
    var2: 'foo',
  },
  {
    var1: 'foo',
    var2: 'foo',
  }
];

Answer 1

Major problem here.

Every time you say "var settings_table", you shadow the variable. Get rid of the "var" keyword on all but the first declaration of settings_table.

Answer 2

To expand on iftrue's answer:

The first time you declare a variable, if you do not specify "var", you are stating it is a global variable.

If you use the "var" keyword, that variable is "scoped" to that particular function. That means its data only accessable by that code inside that function. That means nothing outside that function will have access to that variable. Another function could define the same variable with the same name, and it could store a completely different value.

$.each(settings, function(i, val){
  var settings_table = settings_table+'<put stuff in it>';
});

The trick here is that you are defining a new, anonymous function for use by the iterator. This function has its own scope (it's own personal data). That means that by declaring "var settings_table", you are saying "create a brand new variable, specific to this function". So, what you are in effect doing is assigning the table data to a brand new variable, and then losing the data on the next iteration of the loop. This might be more clear if we were to re-write this as:

function BuildTable(i, val){
  var settings_table = settings_table+'<put stuff in it>';
}

$.each(settings, BuildTable);

What you really want to do is something that can be a little tricky, and it's called a "closure". Closures are an advanced javascript topic. But, in essense, what you are doing is saying "Hey, I want to let this anonymous function have access to my personal data"

In your case, what you want to do is:

var settings_table = '<open the table>';
$.each(settings, function(i, val){
  settings_table = settings_table+'<put stuff in it>';
});

settings_table = settings_table+'<close it>';
$('#rscc_opts').html(settings_table);