Почему мой код не добавляется к строке внутри цикла?

Question

Я использую jQuery, строю таблицу через цикл. Я думал, что лучший способ сделать это будет создать массив, а затем сделать $(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);

Но это не работает. Я предполагаю, что я делаю это неправильно. Или вы могли бы предложить лучшее решение? Мой массив сформирован как:

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

Answer 1

Основная проблема здесь.

Каждый раз, когда вы говорите «var settings_table», вы скрываете переменную. Избавьтесь от ключевого слова "var" на всех, кроме первого объявления settings_table.

Answer 2

Чтобы расширить ответ ифтру:

Когда вы в первый раз объявляете переменную, если вы не указываете «var», вы заявляете, что это глобальная переменная.

Если вы используете ключевое слово «var», эта переменная «ограничена» этой конкретной функцией. Это означает, что его данные доступны только этому коду внутри этой функции. Это означает, что ничто вне этой функции не будет иметь доступа к этой переменной. Другая функция может определять ту же переменную с тем же именем и может хранить совершенно другое значение.

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

Хитрость в том, что вы определяете новую анонимную функцию для использования итератором. Эта функция имеет собственную область действия (это ее личные данные). Это означает, что, объявив «var settings_table», вы говорите «создайте совершенно новую переменную, специфичную для этой функции». Итак, в действительности вы присваиваете данные таблицы новой переменной, а затем теряете данные на следующей итерации цикла. Это могло бы быть более ясным, если бы мы переписали это как:

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

$.each(settings, BuildTable);

То, что вы действительно хотите сделать, может быть немного сложным, и это называется «закрытием». Замыкания - продвинутая тема javascript. Но, по сути, вы говорите: «Эй, я хочу, чтобы эта анонимная функция имела доступ к моим личным данным»

В вашем случае вы хотите сделать следующее:

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);