Convert Table to an Array

Question

I have seen many posts about how to turn an array into a table, but not nearly as many going the other way. I'm looking to take a table like this:


<table id="dataTable">
    <tr>
        <th>Functional Category</th>
        <th>Brand Name</th>
        <th>When Obtained</th>
        <th>How Obtained</th>
        <th>How Often Worn</th>
        <th>Where Made</th>
        <th>Has a Graphic</th>
    </tr>
    <tr>
        <td>T-Shirt</td>
        <td>threadless</td>
        <td>Last 3 Months</td>
        <td>Purchased</td>
        <td>Monthly</td>
        <td>India</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>T-Shirt</td>
        <td>RVCA</td>
        <td>2 Years Ago</td>
        <td>Purchased</td>
        <td>Bi-Monthly</td>
        <td>Mexico</td>
        <td>Yes</td>
    </tr>
</table>

Into an array like this:


var tableData = [
    {
        category: "T-shirt",
        brandName: "threadless",
        whenObtained: "Last 3 Months",
        howObtained: "Purchased",
        howOftenWorn: "Monthly",
        whereMade: "India",
        hasGraphic: "Yes"
    },
    {
        category: "T-shirt",
        brandName: "RVCA",
        whenObtained: "2 Years Ago",
        howObtained: "Purchased",
        howOftenWorn: "Bi-Monthly",
        whereMade: "Mexico",
        hasGraphic: "Yes"
    }
]

I am looking to use jQuery for this and was wondering what the best way to go about this is.

similar question http://stackoverflow.com/questions/1872485/iterate-through-html-table-using-jquery-converting-the-data-in-the-table-into-j — kamui, Nov 22 '11 at 17:52
@JamesMontagne I was unsure as to even begin going about this as it is above and beyond my current skill level. Therefore, I have, unfortunately, not been able to try anything. — ayyp, Nov 22 '11 at 17:53

Rich O'Kelly · Accepted Answer · 2011-11-22T18:10:39.400

15

The following should do it!

var array = [];
var headers = [];
$('#dataTable th').each(function(index, item) {
    headers[index] = $(item).html();
});
$('#dataTable tr').has('td').each(function() {
    var arrayItem = {};
    $('td', $(this)).each(function(index, item) {
        arrayItem[headers[index]] = $(item).html();
    });
    array.push(arrayItem);
});

See here for jsFiddle

edited Nov 22 '11 at 18:10

answered Nov 22 '11 at 18:05

Rich O'Kelly

41,274
9
83
114

2

`$.each($('#dataTable th'), function(index, item) {` can be `$('#dataTable th').each(function(index, item) {`. – gen_Eric Nov 22 '11 at 18:07
if i not want to get last column then? – Mar 07 '18 at 05:51

score 6 · Answer 2 · answered Nov 22 '11 at 18:01

var table = document.getElementById( "dataTable" );
var tableArr = [];
for ( var i = 1; i < table.rows.length; i++ ) {
    tableArr.push({
        category: table.rows[i].cells[0].innerHTML,
        brandName: table.rows[i].cells[1].innerHTML,
        whenObtained: table.rows[i].cells[2].innerHTML,
        howObtained: table.rows[i].cells[3].innerHTML,
        howOftenWorn: table.rows[i].cells[4].innerHTML,
        whereMade: table.rows[i].cells[5].innerHTML,
        hasGraphic: table.rows[i].cells[6].innerHTML
    });
}

James Johnson · Answer 3 · 2011-11-22T18:07:40.940

See here for an example. I've included the relevant code below:

$(function() {
    var $rows= $("#tableName tbody tr");      
    var data = [];

    $rows.each(function(row, v) {
        $(this).find("td").each(function(cell, v) {
            if (typeof data[cell] === 'undefined') {
                data[cell] = [];
            }
            data[cell][row] = $(this).text();
        });
    });

    console.log(data);
});

score 1 · Answer 4 · answered Nov 22 '11 at 18:02

So what I did is select all the tr elements and iterate over them. Next i check to make sure I am not looking at th elements. Then i use the cols array to populate the objects. This could have been simpler (2d array) but I use cols since that is what you had as your output.

var i, items, item, dataItem, data = [];
var cols = [ "category", "brandName", "whenObtained", "howObtained", "howOftenWorn",
 "whereMade", "hasGraphic" ];

$("#dataTable tr").each(function() {
    items = $(this).children('td');

    if(items.length === 0) { // return if this tr only contains th
        return;
    }

    dataItem = {};
    for(i = 0; i < cols.length; i+=1) {
        item = items.eq(i);
        if(item) {
            dataItem[cols[i]] = item.html();
        }
    }
    data.push(dataItem);
});

score 0 · Answer 5 · answered Dec 12 '19 at 15:14

There's a good tool: $(table).map, but saldly, it always return flatten array, no matter how many nested .map() is inside (you need two: one for rows and one for cells).

So let's use jQuery.map for tables and tr's and object.map() for cells, having 2nd nesting level return an array

function t2a (tabble){
return $.map($(tabble),function(el,i) {
    return $.map($(el).find('tr'),function(el,i) {
        return [
            $(el).find('td').map(function() {
                return $(this).text();
            }).get()
        ];
    });
});
}

Convert Table to an Array

5 Answers5

Linked