从嵌套数组创建 HTML 元素

Question

我正在尝试创建餐厅菜单的移动视图。 菜单本身存储在menu变量中，该变量以以下形式保存数据

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...

我希望网站本身显示带有食物部分的按钮（“开胃菜”按钮，“汤”按钮），单击所述按钮后，相应的食物条目将下拉并可见。 现在我正在尝试在每个button下创建相应条目的buttons和divs 。 我通过遍历menu然后遍历每个menu元素来做到这一点。 这是我的代码：js：

let menu = [
  [
      'Appetizers',
      ['Fried Calamari', "", '$11.95'],
      ['Mussels', "Marinara, fra diavolo or bianco", '$12.95'],
      ['Calamari & Mussels', "Fra diavolo or marinara", '$12.95'],
      ['Hot Antipasto', "Two baked clams, two stuffed shells, two stuffed mushrooms, two fried shrimp & scallops in a seafood sauce", '$14.95'],
    ],
    [
      'Soups',
      ['Chicken Noodle','','$4.95'],
      ['Minestrone','','$4.95'],
      ['Lentil','','$5.95'],
      ['Pasta Fagioli','','$5.95'],
      ['Cheese Tortellini','','$6.95'],
    ]



//create html elements by looping through menu variable
      for(i = 0; i < menu.length; i++){
        for(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(i = 0; i < menuEntry.length; i++){
              div = document.createElement("DIV");
              div.innerHTML = menuEntry[i];
              document.body.appendChild(div);
            }
          }
        }
      }

上面的代码将创建：

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

但随后抛出Uncaught TypeError: Cannot read property 'length' of undefined引用for(j = 0; j < menu[i].length; j++) 。 为什么第二个项目['Mussels', "Marinara, fra diavolo or bianco", '$12.95'] （以及所有后续项目）没有正确呈现？ 另外，如果您对如何清理此过程有任何建议，请随时分享，我觉得我将要以一种糟糕的方式实施这种方法......

Answer 1

在第三个 for 循环中，您正在重用相同的循环计数器i 。 尝试使用不同的变量名（在我的示例中，我使用了k ）

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