Convert HTML Table to Array in JavaScript

Convert html table to array in javascript

Here's one example of doing what you want.

var myTableArray = [];

$("table#cartGrid tr").each(function() {
    var arrayOfThisRow = [];
    var tableData = $(this).find('td');
    if (tableData.length > 0) {
        tableData.each(function() { arrayOfThisRow.push($(this).text()); });
        myTableArray.push(arrayOfThisRow);
    }
});

alert(myTableArray);

You could probably expand on this, say, using the text of the TH to instead create a key-value pair for each TD.

Since this implementation uses a multidimensional array, you can access a row and a td by doing something like this:

myTableArray[1][3] // Fourth td of the second tablerow

Edit: Here's a fiddle for your example: http://jsfiddle.net/PKB9j/1/

Convert HTML table to Array (JavaScript)

You can call methods like Array#slice, Array#map, and Array#reduce on the table.rows and tr.cells NodeLists to convert your table to a nested data structure. This method will support an arbitrary number of columns in your table.

Demo Snippet

var rows = [].slice.call($('table')[0].rows)
var keys = [].map.call(rows.shift().cells, function(e) {  return e.textContent.replace(/\s/g, '')})
var result = rows.map(function(row) {  return [].reduce.call(row.cells, function(o, e, i) {    o[keys[i]] = e.textContent    return o  }, {})})
console.log(result)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table border='1'>  <tr>    <th>Display Name</th>    <th>Title</th>    <th>Scope</th>    <th>ID</th>    <th>Description</th>  </tr>
  <tr>    <td>XmlFormLibrary</td>    <td>XML Form Libraries</td>    <td>Web</td>    <td>00bfea71-1e1d-4562-b56a-f05371bb0115</td>    <td>Provides support for XML form libraries for a site.</td>  </tr>  <tr>    <td>LinksList</td>    <td>Links Lists</td>    <td>Web</td>    <td>00bfea71-2062-426c-90bf-714c59600103</td>    <td>Provides support for links lists for a site.</td>  </tr>  <tr>    <td>workflowProcessList</td>    <td>WorkflowProcessList Feature</td>    <td>Web</td>    <td>00bfea71-2d77-4a75-9fca-76516689e21a</td>    <td>This feature provides the ability to create a list to support running custom form actions.    </td>  </tr></table>

How do I convert data from html table into array of object using vanilla javascript

You can use for to loop thru each tr. Find the td on each tr, If there is only 1, store the text on currentCountry variable. If more than one, push the object to the result variable.

var currentCountry = "";var result = [];
var tr = document.querySelectorAll('table tr');
for (var i = 0; i < tr.length; i++) {  var td = tr[i].querySelectorAll('td');
  if (td.length === 1) currentCountry = td[0].innerHTML;  else if (td.length > 1) {    for (var a = 0; a < td.length; a++) {      result.push({country: currentCountry,city: td[a].innerHTML});    }  }}
console.log(result);

<table>  <tbody>    <tr>      <td colspan="3">Canada</td>    </tr>    <tr>      <td>Toronto</td>      <td>Montreal</td>      <td>Vancouver</td>    </tr>    <tr>      <td colspan="3">USA</td>    </tr>    <tr>      <td>New York</td>      <td>Chicago</td>      <td>Boston</td>    </tr>    <tr>      <td>Washington</td>      <td>Detroit</td>      <td>Los Angeles</td>    </tr>  </tbody></table>

Convert table to array in JavaScript without using jQuery

With qSA and Array.prototype.map is pretty simple.

var tableInfo = Array.prototype.map.call(document.querySelectorAll('#tableId tr'), function(tr){
  return Array.prototype.map.call(tr.querySelectorAll('td'), function(td){
    return td.innerHTML;
    });
  });