web-dev-qa-db-fra.com

Convertir des données de table HTML en un objet JSON dans jQuery

Quelqu'un sait comment convertir une table de valeurs HTML en un objet Nice JSON à manipuler avec jQuery?

jqueryhtmljsonhtml-table
21
Jimmy

Un tableau HTML? Comme, tout le contenu <td> Dans un tableau 2D?

var tbl = $('table#whatever tr').map(function() {
  return $(this).find('td').map(function() {
    return $(this).html();
  }).get();
}).get();

Ensuite, utilisez simplement $ .json (ou la bibliothèque de votre choix) pour transformer cela en une chaîne JSON.

edit - réécrit pour utiliser le natif ( shim here ) .map() du prototype du tableau:

var tbl = $('table#whatever tr').get().map(function(row) {
  return $(row).find('td').get().map(function(cell) {
    return $(cell).html();
  });
});

La fonction jQuery .map() a la "fonctionnalité" d'aplatir les tableaux renvoyés dans le tableau de résultats. Autrement dit, si la fonction de rappel renvoie une valeur qui est elle-même un tableau, alors au lieu de ce tableau renvoyé devenant la valeur de une cellule de la .map() result, chacun de ses éléments est ajouté au résultat.

Il pourrait fonctionner pour utiliser la version originale de jQuery et simplement envelopper un tableau supplémentaire autour des valeurs renvoyées.

34
Pointy

Voulez-vous dire la situation suivante?

Donné:

A1 B1 C1 ...
A2 B2 C2 ...
...

Nécessaire:

{"1": ["A1", "B1", "C1", ...], 
 "2": ["A2", "B2", "C2", ...], ...}

Utilisez donc la fonction suivante qui crée une fonction JSON-String valide sans ",":

function html2json() {
   var json = '{';
   var otArr = [];
   var tbl2 = $('#dest_table tr').each(function(i) {        
      x = $(this).children();
      var itArr = [];
      x.each(function() {
         itArr.Push('"' + $(this).text() + '"');
      });
      otArr.Push('"' + i + '": [' + itArr.join(',') + ']');
   })
   json += otArr.join(",") + '}'

   return json;
}
21
John Rumpel

J'avais besoin de la même chose, sauf avec la possibilité d'ignorer les colonnes, de remplacer les valeurs et de ne pas être confondu par les tables imbriquées. J'ai fini par écrire un plugin jQuery table-à-json:

https://github.com/lightswitch05/table-to-json

Tout ce que vous avez à faire est de sélectionner votre table à l'aide de jQuery et d'appeler le plugin:

var table = $('#example-table').tableToJSON();

En voici une démo en action:

http://jsfiddle.net/Crw2C/173/

16
lightswitch05