Convertir un tableau 2D en tableau HTML à l'aide de Javascript

Question

J'ai un tableau 2D dans mon Javascript. Le tableau est affecté à la variable 'arr' et ressemble à ceci :

[
  [
    "0",
    {
      id_cat : "1",
      nom_chat : "Tigre",
    },
  ],
  [
    "1",
    {
      id_cat : "2",
      nom_chat : "Lion",
    },
  ],
  [
    "2",
    {
      id_cat : "3",
      nom_chat : "Guépard",
    },
  ],
  [
    "3",
    {
      id_cat : "5",
      nom_chat : "Léopard",
    },
  ],
]≪/pré>
<p>Je souhaite donner aux utilisateurs un tableau HTML soigné à l'écran, avec des clés comme en-têtes et des valeurs sous forme de lignes, comme suit : </p>
<table class="s-table">
<tête>
<tr>
<th>cat_id</th>
<th>cat_name</th>
≪/tr>
≪/tête>
<corps>
<tr>
<td>1</td>
<td>Tigre</td>
≪/tr>
<tr>
<td>2</td>
<td>Lion</td>
≪/tr>
<tr>
<td>3</td>
<td>Guépard</td>
≪/tr>
<tr>
<td>4</td>
<td>Léopard</td>
≪/tr>
</tcorps>
</tableau>
<p>J'ai consulté de nombreux articles sur StackOverflow et sur le Web, mais je ne suis pas un expert Javascript et, honnêtement, je n'arrive pas à faire fonctionner quoi que ce soit.非常感谢任何帮助！</p>
<p>我的HTML中包含了空表格代码：</p>
<p><br /></p>
<pre class="snippet-code-js lang-js Prettyprint-override"><code>const arr = [["0", { cat_id : "1", cat_name : "Tiger", },], ["1", { cat_id : "2", cat_name : "Lion", },], ["2", { cat_id : "3", cat_name : "Guépard", },], ["3", { cat_id : "5", cat_name : "Léopard", },],]

var tableBody = document.getElementById("wrap");
tableBody.innerHTML = "";
arr.forEach(fonction (ligne) {
  var newRow = document.createElement("tr");
  tableBody.appendChild(newRow);
  if (instance de ligne du tableau) {
    row.forEach (fonction (cellule) {
      var newCell = document.createElement("td");
      newCell.textContent = cellule ;
      newRow.appendChild(newCell);
    });
  } autre {
    newCell = document.createElement("td");
    newCell.textContent = ligne ;
    newRow.appendChild(newCell);
  }
});</code>

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

0 [objet Objet]
1 [objet Objet]
2 [objet Objet]
3 [objet Objet]

我明白为什么 gt;

Answer 1

Voici un exemple qui parcourt chaque objet de données imbriqué Object.entries, en construisant d'abord la ligne d'en-tête à partir des clés, puis les lignes de données à partir des valeurs.

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>