Javascript를 사용하여 2D 배열을 HTML 테이블로 변환

Question

Javascript에 2D 배열이 있습니다. 배열은 'arr' 변수에 할당되며 다음과 같습니다.

[
  [
    "0",
    {
      cat_id: "1",
      cat_name: "호랑이",
    },
  ],
  [
    "1",
    {
      cat_id: "2",
      cat_name: "사자",
    },
  ],
  [
    "2",
    {
      cat_id: "3",
      cat_name: "치타",
    },
  ],
  [
    "삼",
    {
      cat_id: "5",
      cat_name: "표범",
    },
  ],
]

다음과 같이 키를 헤더로, 값을 행으로 사용하여 화면에 깔끔한 HTML 테이블을 사용자에게 제공하고 싶습니다.

<테이블 클래스="s-테이블"> <머리> <번째>cat_id cat_name <본문> 1 타이거 2 사자 3 치타 4 레오파드

StackOverflow와 웹에서 많은 기사를 살펴봤지만 저는 Javascript 전문가가 아니고 솔직히 아무것도 작동할 수 없습니다.不常感谢任何帮助！

나의 HTML中包含了空表格代码:

<code>const arr = [["0", { cat_id: "1", cat_name: "호랑이", },], ["1", { cat_id: "2", cat_name: "사자", },], ["2", { cat_id: "3", cat_name: "치타", },], ["3", { cat_id: "5", cat_name: "표범", },],]

var tableBody = document.getElementById("wrap");
tableBody.innerHTML = "";
arr.forEach(함수 (행) {
  var newRow = document.createElement("tr");
  tableBody.appendChild(newRow);
  if(배열의 행 인스턴스) {
    row.forEach(함수 (셀) {
      var newCell = document.createElement("td");
      newCell.textContent = 셀;
      newRow.appendChild(newCell);
    });
  } 또 다른 {
    newCell = document.createElement("td");
    newCell.textContent = 행;
    newRow.appendChild(newCell);
  }
});</code>

<code><table id="wrap"></table></code>

因为arr是一个二维数组，所以我的代码目前只会产生以下表格：

0 [객체 객체]
1 [객체 객체]
2 [객체 객체]
3 [객체 객체]

我명백为什么会发生这种情况，但我的JS수평불足以实现我想要的结果。

Answer 1

다음은 중첩된 각 데이터 개체의 Object.entries를 반복하는 예입니다. 먼저 키에서 헤더 행을 작성한 다음 값에서 데이터 행을 작성합니다.

으아악 으아악