Как использовать значение массива в качестве имени переменной для аргумента функции для создания таблиц из массивов в JavaScript?

Question

Я хотел бы создать несколько таблиц, данные которых поступают из массивов. (У каждой таблицы свой массив). Кроме того, у меня есть еще один массив, который содержит имя массива данных таблицы и некоторые другие значения.

Насколько я понимаю, проблема в table(x[1],sub), поскольку x[1] не действует как переменная(имя), но это значение действует как строка.

В PHP я бы написал sth. как $$x[1] но как это сделать в JavaScript?

var xxx = [[ 'Adam'    , 'table1' ],
           [ 'Ben'     , 'table2' ],
           [ 'Charlie' , 'table3' ]];

// arrays for table data

var table1 = [[ 'a' , '1' ],
              [ 'b' , '2' ],
              [ 'c' , '3' ],
              [ 'd' , '4' ],
              [ 'e' , '5' ]];
              
var table2 = [[ 'a' , '1' ],
              [ 'b' , '2' ],
              [ 'c' , '3' ],
              [ 'd' , '4' ],
              [ 'e' , '5' ]];
              
var table3 = [[ 'a' , '1' ],
              [ 'b' , '2' ],
              [ 'c' , '3' ],
              [ 'd' , '4' ]],


// function to create table

function table(tableData,sub) {
  var table     = document.createElement('table');
  var tableBody = document.createElement('tbody');

  tableData.forEach(function(rowData) {
    var row = document.createElement('tr');

    rowData.forEach(function(cellData) {
      var cell = document.createElement('td');
      cell.appendChild(document.createTextNode(cellData));
      row.appendChild(cell);
    });

    tableBody.appendChild(row);
  });

  table.appendChild(tableBody);
  
  sub ? sub.appendChild(table) : document.body.appendChild(table);

}

// apply everything to HTML

xxx.forEach( x => {

  var con = document.querySelector('#content');
  var sub = document.createElement('div');
 
  con.appendChild(sub);
  
  var h = document.createElement('h3');
  h.innerHTML = x[0];
  
  sub.appendChild(h3);
  table(x[1],sub);      // x[1] is the problem I guess

});

<div id="myID">
  <h2>Headline</h2>
  <div id="content">
  
  </div>
</div>

Answer 1

Вы можете взять объект со ссылкой на нужные таблицы с именами.

reference = { table1, table2, table3 }

function table(tableData, sub) {
    var table = document.createElement('table'),
        tableBody = document.createElement('tbody');

    tableData.forEach(function(rowData) {
        var row = document.createElement('tr');
        rowData.forEach(function(cellData) {
            var cell = document.createElement('td');
            cell.appendChild(document.createTextNode(cellData));
            row.appendChild(cell);
        });
        tableBody.appendChild(row);
    });
    table.appendChild(tableBody);
    (sub || document.body).appendChild(table);
}

var xxx = [['Adam', 'table1'], ['Ben', 'table2'], ['Charlie', 'table3']],
    table1 = [['a', '1'], ['b', '2'], ['c', '3'], ['d', '4'], ['e', '5']],
    table2 = [['a', '1'], ['b', '2'], ['c', '3'], ['d', '4'], ['e', '5']],
    table3 = [['a', '1'], ['b', '2'], ['c', '3'], ['d', '4']],
    reference = { table1, table2, table3 }; // refernce 

xxx.forEach(x => {
    var con = document.querySelector('#content'),
        sub = document.createElement('div'),
        h = document.createElement('h3');

    con.appendChild(sub);
    h.innerHTML = x[0];
    sub.appendChild(h);          // use h insead of h3
    table(reference[x[1]], sub); // reference
});

<div id="myID">
  <h2>Headline</h2>
  <div id="content"></div>
</div>