Tukar tatasusunan 2D kepada jadual HTML menggunakan Javascript

Question

Saya mempunyai tatasusunan 2D dalam Javascript saya. Tatasusunan diberikan kepada pembolehubah 'arr' dan kelihatan seperti ini:

[
  [
    "0",
    {
      cat_id: "1",
      nama_kucing: "Harimau",
    },
  ],
  [
    "1",
    {
      cat_id: "2",
      nama_kucing: "Singa",
    },
  ],
  [
    "2",
    {
      cat_id: "3",
      nama_kucing: "Cheetah",
    },
  ],
  [
    "3",
    {
      cat_id: "5",
      cat_name: "Leopard",
    },
  ],
]

Saya ingin memberikan pengguna jadual HTML yang kemas pada skrin, dengan kekunci sebagai pengepala dan nilai sebagai baris, seperti berikut:

cat_id	cat_name
1	Harimau
2	Singa
3	Cheetah
4	Leopard

Saya telah melihat banyak artikel tentang StackOverflow dan di seluruh web, tetapi saya bukan pakar Javascript dan sejujurnya saya tidak boleh mendapatkan apa-apa untuk berfungsi.非常感谢任何帮助！

我的HTML中包含了空表格代码：

<code>const arr = [["0", { cat_id: "1", cat_name: "Tiger", },], ["1", { cat_id: "2", cat_name: "Lion", },], ["2", { cat_id: "3", cat_name: "Cheetah", },], ["3", { cat_id: "5", cat_name: "Leopard", },],]

var tableBody = document.getElementById("wrap");
tableBody.innerHTML = "";
arr.forEach(fungsi (baris) {
  var newRow = document.createElement("tr");
  tableBody.appendChild(newRow);
  if (baris instanceof Array) {
    row.forEach(fungsi (sel) {
      var newCell = document.createElement("td");
      newCell.textContent = sel;
      newRow.appendChild(newCell);
    });
  } lain {
    newCell = document.createElement("td");
    newCell.textContent = baris;
    newRow.appendChild(newCell);
  }
});</code>

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

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

0 [objek Objek]
1 [objek objek]
2 [objek Objek]
3 [objek objek]

我明白为什么会发生这种情况，但我的JS水平什么会发生这种情况，但我的JS水平不足以实现我以实现我实现我况，但我的JS水平不足以实现我。

Answer 1

Berikut ialah contoh yang berulang pada setiap objek data bersarang Object.entries, mula-mula membina baris pengepala daripada kekunci dan kemudian baris data daripada nilai.

const arr = [
  ["0", { cat_id: "1", cat_name: "Tiger" }],
  ["1", { cat_id: "2", cat_name: "Lion" }],
  ["2", { cat_id: "3", cat_name: "Cheetah" }],
  ["3", { cat_id: "5", cat_name: "Leopard" }],
];

var tableBody = document.getElementById("wrap");

tableBody.innerHTML = "";

const data = arr.map(a =>
  Object.entries(a[1]).sort(([a], [b]) => a.localeCompare(b))
);

const headerRow = document.createElement("tr");
tableBody.appendChild(headerRow);
for (const [key] of data[0]) {
  const newCell = document.createElement("td");
  newCell.textContent = key;
  headerRow.appendChild(newCell);
}

for (const datum of data) {
  const newRow = document.createElement("tr");
  tableBody.appendChild(newRow);
  for (const [, value] of datum) {
    const newCell = document.createElement("td");
    newCell.textContent = value;
    newRow.appendChild(newCell);
  }
}

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