Tabla HTML a JSON

Question

Necesito tomar las filas de la tabla y convertir a JSON.

¿Alguna idea? Tengo este código aquí pero no funciona.

function tableToJSON(tableID) { 
    return $(tableID + " tr").map(function (row) { 
     return row.descendants().pluck("innerHTML"); 
    }).toJSON(); 
} 

Answer 1

function tableToJson(table) { 
    var data = []; 

    // first row needs to be headers 
    var headers = []; 
    for (var i=0; i<table.rows[0].cells.length; i++) { 
     headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,''); 
    } 

    // go through cells 
    for (var i=1; i<table.rows.length; i++) { 

     var tableRow = table.rows[i]; 
     var rowData = {}; 

     for (var j=0; j<tableRow.cells.length; j++) { 

      rowData[ headers[j] ] = tableRow.cells[j].innerHTML; 

     } 

     data.push(rowData); 
    }  

    return data; 
} 

Tomado de John Dyer's Blog

Answer 2

prueba $("#"+tableID + " tr") en su lugar.

Answer 3

Debe encontrar útil esta información: http://encosia.com/use-jquery-to-extract-data-from-html-lists-and-tables/

Answer 4

HTML:

<table id="answered"> 
<tbody> 
    <tr> 
     <td data-id="user.email">email@email.com</td> 
     <td data-id="meme.yodawg">Yo Dog! I Heard you liked answers, so I answered your question, with a method wrapped in a jQuery plugin!</td> 
    </tr> 
</tbody> 
</table> 

jQuery:

(function($) { 

    $.extend($.fn, { 

    tableRowsToJSONWithFilter : function (filter) { 
     var tableSelector = this, item, attr, data, _JSON = []; 
     if (typeof(tableSelector) !== 'object') { 
     return new Error('Invalid tableSelect!'); 
     }; 
     $(tableSelector, 'tr').each(function(index, tr) { 
     item = {}; 
     $('td', $(this)).each(function(index, td) { 
      attr = $(td).attr('data-id'); 
      data = $(td).text(); 
      if (attr !== undefined && data !== '' && filter && new RegExp(filter, 'i').test(attr)) { 
      item[attr] = data; 
      }; 
     }); 
     _JSON.push(item); 
     }); 
     return _JSON; 
    } 

    }) 

})(jQuery); 

Uso:

$('#answered').tableRowsToJSONWithFilter('yodawg'); 

Answer 5

que no estaba contento con todas las soluciones anteriores y terminó escribiendo mi propio plugin de jQuery para lograr esto. Es muy similar a la solución pero acepta varias opciones para personalizar los resultados, como ignorar filas ocultas, anular nombres de columna y anular valores de celda

El complemento se puede encontrar aquí junto con algunos ejemplos si esto es más de lo que buscando: https://github.com/lightswitch05/table-to-json

Answer 6

Ésta funcionó para mí: (tenía sólo 2 líneas en mi mesa, TH y TD)

function htmlToJson(table) { 
    var obj = {}, 
     itemsLength = $(table.find('tbody tr')[0]).find('th').length; 
    for (i=0;i<itemsLength;i++) { 
     key = $(table.find('tbody tr')[0]).find('th').eq(i).text(); 
     value = $(table.find('tbody tr')[1]).find('td').eq(i).text(); 
     obj[key] = value; 
    } 
    return JSON.stringify(obj) 
} 

Answer 7

tabla HTML con la culata en T y tbody:

function htmlTableToJson(table, edit = 0, del = 0) { 
     // If exists the cols: "edit" and "del" to remove from JSON just pass values = 1 to edit and del params 
     var minus = edit + del; 
     var data = []; 
     var colsLength = $(table.find('thead tr')[0]).find('th').length - minus; 
     var rowsLength = $(table.find('tbody tr')).length; 

     // first row needs to be headers 
     var headers = []; 
     for (var i=0; i<colsLength; i++) { 
      headers[i] = $(table.find('thead tr')[0]).find('th').eq(i).text(); 
     } 

     // go through cells 
     for (var i=0; i<rowsLength; i++) { 
      var tableRow = $(table.find('tbody tr')[i]); 
      var rowData = {}; 
      for (var j=0; j<colsLength; j++) { 
       rowData[ headers[j] ] = tableRow.find('td').eq(j).text(); 
      } 
      data.push(rowData); 
     }  
     return data; 
    }