Comment puis-je facilement convertir des données JSON en un tableau HTML ?

Convertir facilement des données JSON en un tableau HTML

Dans le développement Web actuel, générer dynamiquement des tableaux à partir de données JSON est une tâche courante. Mais que se passe-t-il si vous souhaitez automatiser ce processus sans définir manuellement les colonnes ?

Présentation des bibliothèques JavaScript

Heureusement, il existe des bibliothèques JavaScript qui simplifient cette tâche. L'une de ces bibliothèques est la populaire jQuery. Il offre un moyen pratique de créer des tables dynamiques basées sur des données JSON, de lire les clés et de générer des colonnes en conséquence.

Approche DIY

Bien sûr, vous pouvez créer la vôtre Solution JavaScript si vous préférez. Cependant, l'utilisation des bibliothèques existantes peut vous faire gagner du temps et des efforts, en particulier lorsqu'il s'agit de structures JSON plus complexes.

Extrait de code

Pour ceux qui préfèrent une approche jQuery, voici un extrait de code fourni par l'un des utilisateurs :

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

// Builds the HTML Table out of myList.
function buildHtmlTable(selector) {
  var columns = addAllColumnHeaders(myList, selector);

  for (var i = 0; i < myList.length; i++) {
    var row$ = $('<tr>');
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = myList[i][columns[colIndex]];
      if (cellValue == null) cellValue = "";
      row$.append($('<td>').html(cellValue));
    }
    $(selector).append(row$);
  }
}

// Adds a header row to the table and returns the set of columns.
function addAllColumnHeaders(myList, selector) {
  var columnSet = [];
  var headerTr$ = $('<tr>');

  for (var i = 0; i < myList.length; i++) {
    var rowHash = myList[i];
    for (var key in rowHash) {
      if ($.inArray(key, columnSet) == -1) {
        columnSet.push(key);
        headerTr$.append($('<th>').html(key));
      }
    }
  }
  $(selector).append(headerTr$);

  return columnSet;
}

// Example Usage
$(document).ready(function() {
  buildHtmlTable('#excelDataTable');
});

Cet extrait de code montre comment générer dynamiquement un tableau HTML à l'aide de jQuery basé sur les données JSON fournies. La fonction buildHtmlTable parcourt les données JSON pour créer des lignes et des colonnes, tandis que la fonction addAllColumnHeaders identifie toutes les clés uniques pour créer les en-têtes de tableau.

Avec cette solution, vous pouvez convertir rapidement et efficacement les données JSON en un format visuellement attrayant. Tableau HTML avec génération dynamique de colonnes.

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!