将2D数组从一个JavaScript函数传递到另一个JavaScript函数

我试图根据2D数组从用户那里收集信息。在Javascript中将2D数组作为数组而不是文本从一个函数传递到另一个函数时遇到问题。我可能做错了什么

数组是这样的

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

其思想是首先显示

Column1

，将“标题”作为文本，并通过按钮显示类别列表。单击按钮时，它应显示所需列的内容。因此，如果用户单击类别3，他应该将类别3视为文本，将选项“眼睛”、“腿”、“手臂”视为按钮

我的问题是将正确的参数传递给

onclick

，因为

nextStep（这个，数据库）

不起作用。当我传递下一步时（这个，\''+database+'\'）当然它会以文本而不是数组的形式传递“database”

有什么建议吗

我的HTML是一个简单的div

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

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

window.addEventListener（“加载”，开始，错误）；
函数启动（）{
var数据库=[[标题，类别1，类别2，类别3]，[类别1，苹果，蓝色，眼睛]，[类别2，橙色，绿色，腿]，[类别3，成对，黄色，手臂]，，芒果，灰色，]；
渲染分类（数据库，1）；
}
功能呈现类别（数据库、pos）{
mainPage=document.getElementById（“mainPage”）；
var catTitles=数据库[0]；
var catTitle=catTitles[pos]；
var allmainPage=数据库[2]；
mainPage.innerHTML=''+catTitle+''；
对于（var i=0；i我建议您使用
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>';
  }

虽然我不认为这是最好的方法，但它应该能解决你的问题

如果您想听听我的意见，我认为您应该将数据库存储在本地存储中，并使用“键”作为参数（如database01）访问它。
建议：不要像使用
onclick=“…”那样直接在html上使用干扰侦听器
，如果您创建元素（
elem=document.createElement（'div'）），您可以对元素及其侦听器进行更多的控制。
）然后用JS分配给监听者，比如：
elem.onclick=…
allmainPage
是一维的，你把它当作是二维的谢谢你的提示。你是对的，我应该把整个事情改成在本地进行所有计算。@senedot如果你能接受答案，我会很高兴的^（只需点击updoot/downdoot按钮下方的“检查”图标）对不起，我仍在努力找到我的方法。感谢您的留言和反馈，我非常感谢。
function nextStep(databaseString) {
    let database = JSON.parse(databaseString)
}