Convert HTML table (as a string) into JS Objects array

Question

What's a simple/elegant way to convert a string containing the source code of a HTML table into an array of javascript object ?

It would convert each <tr> into an object and each <td> into an object property.

The properties names aren't extracted from the table, they are already defined.

For example, passing this code as a string to the javascript function :

<table>
<tr>
    <td>2280</td>
    <td>23020044623</td>
    <td>RTS</td>
    <td>EUR</td>
    <td>1</td>
    <td>29/07/2015</td>
    <td>10/07/2017</td>
    <td>no</td>
</tr>
<tr>
    <td>2281</td>
    <td>23020011223</td>
    <td></td>
    <td>GBP</td>
    <td>0,78</td>
    <td>10/10/2013</td>
    <td>10/10/2018</td>
    <td>Occult</td>
</tr>
</table>

would return :

// Properties names are known
[
{
    prop1: '2280',
    prop2: '23020044623',
    prop3: 'RTS',
    prop4: 'EUR',
    prop5: '1',
    prop6: '29/07/2015',
    prop7: '10/07/2017',
    prop8: 'no'
},
{
    prop1: '2281',
    prop2: '23020011223',
    prop3: '',
    prop4: 'GBP',
    prop5: '0,78',
    prop6: '10/10/2013',
    prop7: '10/10/2018',
    prop8: 'Occult'
}
]

Please read How to Ask. Key phrases: "Search, and research" and "Explain ... any difficulties that have prevented you from solving it yourself". — Heretic Monkey
– Heretic Monkey, Commented Nov 9, 2016 at 16:52
Do you want to do this parsing yourself? If not doing a Google search on "convert html to json" reveals some third party options that may work. What have you tried? — Paul Stoner
– Paul Stoner, Commented Nov 9, 2016 at 16:56

adeneo · Accepted Answer · 2016-11-09 16:59:59Z

You could parse the HTML and use map and reduce to return the expected array of objects

var html   = '<table><tr><td>2280</td><td>23020044623</td><td>RTS</td><td>EUR</td><td>1</td><td>29/07/2015</td><td>10/07/2017</td><td>no</td></tr><tr><td>2281</td><td>23020011223</td><td></td><td>GBP</td><td>0,78</td><td>10/10/2013</td><td>10/10/2018</td><td>Occult</td></tr></table>';
var parser = new DOMParser();
var doc    = parser.parseFromString(html, "text/html");
var obj    = [].map.call(doc.querySelectorAll('tr'), tr => {
    return [].slice.call(tr.querySelectorAll('td')).reduce( (a,b,i) => {
        return a['prop' + (i+1)] = b.textContent, a;
    }, {});
});

console.log(obj)

trincot · Accepted Answer · 2016-11-09 17:10:02Z

You could use this ES6 function:

var props = ['prop1', 'prop2', 'prop3', 'prop4', 'prop5', 'prop6', 'prop7', 'prop8'];

function fromTable(html) {
    return Array.from(
        new DOMParser().parseFromString(html, "text/html").querySelectorAll('tr'), 
        row => [...row.cells].reduce(
            (o, cell, i) => (o[props[i]] = cell.textContent, o), {}));
}
// Sample data:
var html = `<table>
<tr>
    <td>2280</td>
    <td>23020044623</td>
    <td>RTS</td>
    <td>EUR</td>
    <td>1</td>
    <td>29/07/2015</td>
    <td>10/07/2017</td>
    <td>no</td>
</tr>
<tr>
    <td>2281</td>
    <td>23020011223</td>
    <td></td>
    <td>GBP</td>
    <td>0,78</td>
    <td>10/10/2013</td>
    <td>10/10/2018</td>
    <td>Occult</td>
</tr>
</table>`;
// Get object from HTML:
var res = fromTable(html);
// Output result
console.log(res);

.as-console-wrapper { max-height: 100% !important; top: 0; }

sam · Accepted Answer · 2016-11-09 17:02:21Z

Iterate through each <tr> and then its each <td>.

(function() {
  var ob = [];
  $('table tr').each(function() {
    var row = {};
    $(this).children().each(function(ind) {
      row['prop' + (ind + 1)] = $(this).text();
    })
    ob.push(row);
  });

  console.log(ob);
})();

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<table id="table">
  <tr>
    <td>2280</td>
    <td>23020044623</td>
    <td>RTS</td>
    <td>EUR</td>
    <td>1</td>
    <td>29/07/2015</td>
    <td>10/07/2017</td>
    <td>no</td>
  </tr>
  <tr>
    <td>2281</td>
    <td>23020011223</td>
    <td></td>
    <td>GBP</td>
    <td>0,78</td>
    <td>10/10/2013</td>
    <td>10/10/2018</td>
    <td>Occult</td>
  </tr>
</table>

Collectives™ on Stack Overflow

Convert HTML table (as a string) into JS Objects array

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related