Comment puis-je générer un tableau HTML à partir de données JSON à l'aide de JavaScript ?

Convertir les données JSON en tableau HTML

Question :

Existe-t-il un moyen de générer dynamiquement un tableau HTML à partir de JSON données en utilisant jQuery ou JavaScript ?

Réponse :

Oui, il existe plusieurs bibliothèques qui peuvent vous aider à y parvenir. Une option courante consiste à utiliser le plugin jQuery DataTables. Cependant, si vous préférez ne pas utiliser de bibliothèques, vous pouvez également créer votre propre table en utilisant du JavaScript pur.

Code JavaScript :

Voici un extrait de code JavaScript pour créer un tableau HTML à partir de données JSON :

// JSON data
var myList = [
  { "name": "abc", "age": 50 },
  { "age": "25", "hobby": "swimming" },
  { "name": "xyz", "hobby": "programming" }
];

// Build the table
var table = document.createElement('table');
var headerRow = document.createElement('tr');

// Add header row with column names
for (var key in myList[0]) {
  var th = document.createElement('th');
  th.textContent = key;
  headerRow.appendChild(th);
}
table.appendChild(headerRow);

// Add data rows
for (var i = 0; i < myList.length; i++) {
  var row = document.createElement('tr');
  for (var key in myList[i]) {
    var td = document.createElement('td');
    td.textContent = myList[i][key];
    row.appendChild(td);
  }
  table.appendChild(row);
}

// Append the table to the DOM
document.body.appendChild(table);

Ce code suppose que tous les objets de la liste JSON ont le même jeu de clés. Si ce n'est pas le cas, vous devrez peut-être ajouter une logique supplémentaire pour gérer les clés manquantes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!