仅显示二维数组中的第一个元素

Question

我试图只显示二维数组中的第一个元素，但它只显示第二个 arrays 第一个元素。 我该怎么做呢？

var foods = [
  ["name", "category", "servingOz", "calories_serving"],
  ["name2", "category2", "servingOz2", "calories_serving2"],
];

function getfoodNames() {
  for (i = 0; i < foods.length; i++) {
    for (j = 0; j < foods[i].length; j++) {
      document.getElementById("foods").innerHTML = foods[i][0].toString();
    }
  }
}

Answer 1

在 for 循环的每一次传递中，您都将覆盖 food 元素的 innerHTML。 所以只展示最后一个。

您应该使用 += 操作：

document.getElementById('foods').textContent += foods[i][0];

我建议不要使用innerHTML，因为它很危险。

更新

我刚刚注意到内部 for 循环是不必要的，因此您可以完全删除它：

for(let i=0; i < foods.length; i++) {

    document.getElementById('foods').textContent += foods[i][0];

}

Answer 2

for (i=0; i<foods.length; i++) {
   document.getElementById('foods').innerHTML += foods[i][0].toString();
}

Answer 3

我的建议：

 var arr = [ ["name", "category", "servingOz", "calories_serving"], ["name2", "category2", "servingOz2", "calories_serving2"] ]; arr.forEach(el => foods.innerText += ' ' + el[0]);

 <div id="foods"></div>