Comment jQuery peut-il être utilisé pour convertir efficacement des données JSON en tableaux HTML ?-js tutoriel-php.cn

Comment jQuery peut-il être utilisé pour convertir efficacement des données JSON en tableaux HTML ?

DDD

Libérer： 2024-11-28 15:55:11

original

969 Les gens l'ont consulté

How Can jQuery Be Used to Efficiently Convert JSON Data into HTML Tables?

Conversion de données JSON en tableaux HTML : une solution utilisant jQuery

Lorsque vous travaillez avec des données dynamiques, la nécessité de les afficher sous forme de tableau se pose souvent. Bien qu'il soit possible de générer manuellement des tableaux HTML à partir de données JSON, cela peut prendre du temps. C'est là que les bibliothèques jQuery brillent.

jQuery : une bibliothèque pour la génération dynamique de tables

jQuery offre une solution puissante pour générer des tables à partir de données JSON. En tirant parti de sa flexibilité et de sa facilité d'utilisation, les développeurs peuvent créer des tableaux avec un minimum d'effort. La clé est de gérer dynamiquement l'extraction des en-têtes de colonnes et le remplissage des cellules du tableau.

Extraction dynamique des en-têtes de colonne

Les en-têtes de colonne représentent les clés des objets dans le Données JSON. Pour les extraire efficacement, vous pouvez utiliser une boucle pour parcourir les objets et collecter toutes les clés uniques. Cela garantit que le tableau contient toutes les colonnes nécessaires.

Remplir les cellules du tableau

Après avoir extrait les en-têtes de colonnes, l'étape suivante consiste à remplir les cellules du tableau avec le correspondant valeurs. Cela peut être fait en parcourant à nouveau les données JSON et en accédant aux valeurs de chaque en-tête de colonne. Si une valeur est manquante, elle peut être remplacée par une chaîne vide.

Un exemple de code

Voici un extrait de code qui illustre l'approche décrite ci-dessus :

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

// 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;
}

// 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$);
  }
}

Copier après la connexion

Démonstration

Pour démontrer la fonctionnalité, vous pouvez ajouter ceci extrait de code sur une page HTML avec la bibliothèque jQuery requise. Le code HTML suivant affichera le tableau :

<body onLoad="buildHtmlTable('#excelDataTable')">
  <table>

Copier après la connexion

Ce code générera un tableau dynamique à partir des données JSON, extrayant automatiquement les en-têtes de colonnes et remplissant les cellules du tableau. En utilisant les puissantes capacités de jQuery, vous pouvez facilement présenter vos données JSON sous forme de tableau.

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!