Convert 2D array to HTML table using Javascript

Question

I have a 2D array in my Javascript. The array is assigned to the variable 'arr' and looks like this:

[
  [
    "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",
    },
  ],
]

I want to give users a neat HTML table on the screen, with keys as headers and values ​​as rows, as follows:

cat_id	cat_name
1	Tiger
2	Lion
3	Cheetah
4	Leopard

I've looked at a lot of articles on StackOverflow and around the web, but I'm not a Javascript expert and I honestly can't get anything to work.非常感谢任何帮助！

我的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(function (row) {
  var newRow = document.createElement("tr");
  tableBody.appendChild(newRow);
  if (row instanceof Array) {
    row.forEach(function (cell) {
      var newCell = document.createElement("td");
      newCell.textContent = cell;
      newRow.appendChild(newCell);
    });
  } else {
    newCell = document.createElement("td");
    newCell.textContent = row;
    newRow.appendChild(newCell);
  }
});</code>

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

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

0   [object Object]
1   [object Object]
2   [object Object]
3   [object Object]

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

Answer 1

Here is an example that iterates over the Object.entries of each nested data object, first building the header row from the keys and then the data rows from the values.

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>