HTML table data into arrays via jQuery

Question

I want to extract data from an html table like

<table>
    <tr>
        <th> Header1 </th>
        <th> Header2 </th>
        <th> Header3 </th>
    </tr>
    <tr>
        <td> Value 1,1 </td>
        <td> Value 2,1 </td>
        <td> Value 3,1 </td>
    </tr>

    ... rows ...

</table>

and get arrays:

an array for the headers

a 2d array for the column values (or an array for each column)

How can I do this using jQuery?

I don't care to serialize it, or put it into a JSON object because I want to use it to render a chart.

---

related General design question:

at the moment I have something like

1. ajax query returns html table
2. use jQuery to get values from html table
3. render chart

does it make more sense to throw a JSON object back from the ajax query and then render a table and a chart from there?

Answer 1

Something like this?

$(function() {

  var headers = $("span",$("#tblVersions")).map(function() { 
    return this.innerHTML;
  }).get();

  var rows = $("tbody tr",$("#tblVersions")).map(function() { 
    return [$("td:eq(0) input:checkbox:checked",this).map(function() { 
      return this.innerHTML;     
    }).get()];
  }).get();

  alert(rows);
});

Answer 2

demo updated http://jsfiddle.net/ish1301/cnsnk/

var header = Array();

$("table tr th").each(function(i, v){
        header[i] = $(this).text();
})

alert(header);

var data = Array();

$("table tr").each(function(i, v){
    data[i] = Array();
    $(this).children('td').each(function(ii, vv){
        data[i][ii] = $(this).text();
    }); 
})

alert(data);

Answer 3

yet another way of doing it

var headers = jQuery('th').map(function(i,e) { return e.innerHTML;}).get();
var datas = []
jQuery.each(jQuery('tr:gt(0)'), function(i,e ) {
   datas.push(jQuery('td', e).map(function(i,e) {
                                     return e.innerHTML; 
                                  }).get()
             );
});

Answer 4

Something along the lines of:

var thArray = new Array();
var contentArray = new Array();

$('th').each(function(index) {
  thArray[index] =    $(this).html();
})


$('tr').each(function(indexParent) {
  contentArray['row'+indexParent] = new Array();
    $(this).children().each(function(indexChild) {
      contentArray['row'+indexParent]['col'+indexChild] = $(this).html();
    });
});

This gives you two arrays, thArray which is an array of your headings and contentArray which is a 2d array containing rows and columns: contentArray['row1']['col0'] returns " Value 1,1"

Actually, contentArray contains the th's as well... referenced 'row0'

Answer 5

does it make more sense to throw a JSON object back from the ajax query and then render a table and a chart from there?

Yes, absolutely. Return JSON in response to your AJAX request, then you can render the table using something like jQuery Templates and use the same underlying data to generate your chart as well.

Answer 6

I'm tinkering with the same thing over here, but I prefer iterating through all tables and writing the header and body arrays into properties of each table, so here's my modification to the original answer:

$(function() {
$("table").each(function(){
  var $table = $(this),
      $headerCells = $("thead th", $(this)),
      $rows = $("tbody tr", $(this));
  var headers = [],
      rows = [];


$headerCells.each(function(k,v) {
   headers[headers.length] = $(this).text();
  $table.prop("headAry", headers);
});

$rows.each(function(row,v) {
  $(this).find("td").each(function(cell,v) {
    if (typeof rows[cell] === 'undefined') rows[cell] = [];
    rows[cell][row] = $(this).text();
    $table.prop("bodAry", rows);
  });
});
console.log($(this).prop('headAry'));
console.log($(this).prop('bodAry'));  
});
});

JSbin

Answer 7

I would think it would make more sense to get a json array back from the ajax call and generate your table/chart from that. With jquery templates this isn't hard at all.

Answer 8

Here's a modification of Jerome Wagner's answer that uses recursive maps instead of a map inside an 'each':

http://jsbin.com/oveva3/383/edit

  var headers = $("th",$("#meme")).map(function() { 
    return this.innerHTML;
  }).get();

  var rows = $("tbody tr",$("#meme")).map(function() { 
    return [$("td",this).map(function() { 
      return this.innerHTML;     
    }).get()];
  }).get();