Javascriptを使用して2D配列をHTMLテーブルに変換します

Question

JavaScript に 2D 配列があります。配列は変数 'arr' に割り当てられ、次のようになります:

[
  [
    「0」、
    {
      猫 ID: "1"、
      猫の名前: "トラ",
    }、
  ]、
  [
    「1」、
    {
      猫 ID: "2"、
      猫の名前: "ライオン",
    }、
  ]、
  [
    「2」、
    {
      猫 ID: "3"、
      猫の名前: "チーター",
    }、
  ]、
  [
    「3」、
    {
      猫 ID: "5"、
      猫の名前: "ヒョウ",
    }、
  ]、
]

次のように、キーをヘッダー、値を行とした、きちんとした HTML テーブルを画面上にユーザーに提供したいと考えています。

<テーブルクラス="s-テーブル"> <頭> cat_id 猫の名前 <みんな> 1 タイガー 2 ライオン 3 チーター 4 ヒョウ

StackOverflow やウェブ上の記事をたくさん見てきましたが、私は Javascript の専門家ではないので、正直、何も機能しません。

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

<code>const arr = [["0", { cat_id: "1", cat_name: "Tiger", },], ["1", { cat_id: "2", cat_name: "ライオン", },], ["2", { cat_id: "3", cat_name: "チーター", },], ["3", { cat_id: "5"、cat_name: "ヒョウ"、}、]、]

var tableBody = document.getElementById("ラップ");
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 は 2 つのグループであるため、私たちの代コード目前にのみ次の表格が生成されます:

0 [オブジェクト オブジェクト]
1 [オブジェクト オブジェクト]
2 [オブジェクト オブジェクト]
3 [オブジェクト オブジェクト]

明らかにこのような状況が発生する可能性がありますが、私たちのJSレベルは私たちが望んでいた結果を実現するには不十分です。

Answer 1

ここでは、ネストされた各データ オブジェクトの Object.entries を反復処理し、最初にキーからヘッダー行を構築し、次に値からデータ行を構築する例を示します。

リーリー リーリー