Javascript 从嵌套数组创建HTML元素

我正在尝试创建餐厅菜单的移动视图。菜单本身存储在

菜单

变量中，该变量以

let menu = [
  [
    'Food Section', //i.e Appetizers
    ['Entry', 'Food Description' , 'Price'],
    ['Entry', 'Food Description' , 'Price']

  ]
  [
    'Food Section', //i.e Soup
    ['Entry', 'Food Description' , 'Price'],
    ['Entry', 'Food Description' , 'Price']
  ],
   etc...

我希望网站本身能显示带有食物部分的按钮（“开胃菜”按钮、“汤”按钮），点击所述按钮后，相应的食物条目将下拉并可见。现在，我只想在每个

按钮下创建相应条目的
按钮
和
divs
。我通过循环
菜单
，然后循环每个
菜单
元素来实现这一点。这是我的密码：
js:

let菜单=[
[
“开胃菜”，
[Fried Calamari'，''，'$11.95']，
[‘贻贝’、‘马里纳拉、弗拉·迪亚沃罗或比安科’、‘12.95美元’]，
['Calamari&贻贝'，'Fra diavolo或marinara'，'12.95美元']，
[“热的安提帕斯托”，“两个烤蛤蜊，两个填充贝壳，两个填充蘑菇，两个海鲜酱炸虾和扇贝”，“14.95美元]，
],
[
“汤”，
[“鸡肉面”，“4.95美元]，
['Minestrone'，''，'4.95美元']，
[Lentl'，''，$5.95']，
[Fagioli意大利面，'''5.95']，
[“奶酪玉米饼”，“6.95美元]，
]
//通过循环菜单变量创建html元素
对于（i=0；i

上述代码将创建：

<button>Appetizers</button>
<div>Fried Calamari</div>
<div></div>
<div>$11.95</div>

开胃菜
炸鱿鱼
$11.95

但随后抛出
未捕获类型错误：无法读取未定义的
的属性'length'，参考（j=0；j
。为什么第二项
['Mussels'，“Marinara，fra diavolo或bianco'，'12.95']
（以及所有后续项）未正确呈现？另外，如果您对如何清理此过程有任何建议，请随意分享，我觉得我将以一种糟糕的方式实现此过程…
在第三个for循环中，您正在重用相同的循环计数器
I
。尝试使用不同的变量名（在我的示例中，我使用了
k
）

for（设i=0；i
您在内部循环中再次使用了
i
。它会中断主循环并在下一次迭代中导致错误。还应使用
var
良好调用将所有变量声明为本地变量！添加了它们
<button>Appetizers</button>
<div>Fried Calamari</div>
<div></div>
<div>$11.95</div>

for(let i = 0; i < menu.length; i++){
  for(let j = 0; j < menu[i].length; j++){
    if(j == 0){
      foodSectionText = menu[i][j];
      let btn = document.createElement("BUTTON");
      btn.innerHTML = foodSectionText;
      document.body.appendChild(btn);      }
    else{
      menuEntry = menu[i][j];
      console.log(menuEntry);
      for(let k = 0; k < menuEntry.length; k++){
        div = document.createElement("DIV");
        div.innerHTML = menuEntry[k];
        document.body.appendChild(div);
      }
    }
  }
}