Передача 2D-массива из одной функции JavaScript в другую

Question

Я пытаюсь собрать информацию от пользователя на основе 2D-массива. У меня проблемы с передачей 2D-массива из одной функции в Javascript в другую функцию в виде массива, а не в виде текста. Что я могу делать не так?

Массив такой

Title       Category1   Category2   Category3
Category1   Apples      Blue        Eyes
Category2   Oranges     Green       Legs
Category3   Pairs       Yellow      Arms
            Mango       Gray    

Идея состоит в том, чтобы сначала отобразить Column1, указав "Заголовок" в виде текста и список категорий с помощью кнопок. При нажатии на кнопку должно отображаться содержимое соответствующего столбца. Поэтому, если пользователь нажимает на категорию 3, он должен видеть категорию 3 как текст, а параметры «глаза», «ноги», «руки» - как кнопки.

Моя проблема заключается в передаче onclick правильного значения. параметры как nextStep(this,database) не работают. Когда я передаю nextStep(this,\''+database+'\'), конечно, он передает «базу данных» как текст, а не как массив.

Есть предложения?

My HTML - это простой div.

      <div id="mainPage"></div>

My Javascript запускается при загрузке ...

window.addEventListener("load", starting, false);

function starting(){
  var database = [[Title, Category1, Category2, Category3], [Category1,Apples,Blue,Eyes],[Category2,Oranges,Green,Legs],[Category3,Pairs,Yellow,Arms],[,Mango,Gray,]];
  renderCategories(database,1);
}

function renderCategories(database, pos){
  mainPage = document.getElementById("mainPage");

  var catTitles = database[0];
  var catTitle = catTitles[pos];
  var allmainPage = database[2];
  mainPage.innerHTML = '<div class="input-field col s12 m12"><h3>'+catTitle+'</h3></div>';

  for(var i=0; i<allmainPage.length; i++){
    var categoryListValue = allmainPage[i][pos];
    if (categoryListValue !=""){
      mainPage.innerHTML += '<div class="row"><button onclick="nextStep(this,database)" value="'+categoryListValue+'">'+categoryListValue+'</button></div>';
    }
  }
}

function nextStep(selection, database){
  var selectedCat = selection.value;
  alert(selectedCat);
  var catTitles = database[0];
  alert(catTitles);
}
window.addEventListener("load", starting, false);

Answer 1

Я предлагаю вам передать базу данных с помощью функции JSON.stringify(), а затем вы можете преобразовать ее обратно с помощью JSON.parse(), например:

for(var i=0; i<allmainPage.length; i++){
    let categoryListValue = allmainPage[i][pos],
        databaseString = JSON.stringify(database);

    if (categoryListValue !="")
       mainPage.innerHTML += '<div class="row"><button onclick="nextStep(this,' + databaseString + ')" value="'+categoryListValue+'">'+categoryListValue+'</button></div>';
  }

И затем:

function nextStep(databaseString) {
    let database = JSON.parse(databaseString)
}

Хотя я не думаю, что это лучший способ сделать это, это должно решить вашу проблему.

Если вы хотите, чтобы мое мнение, я думаю, вам следует сохранить базу данных в вашем локальном хранилище и обработать ее, используя «ключи» в качестве параметров (например, database01) и тому подобное.