將HTML表（作為字符串）轉換為JS Objects數組

Question

將包含HTML表源代碼的字符串轉換為javascript對象數組的簡單/優雅方法是什么？

它將每個<tr>轉換為對象，並將每個<td>轉換為對象屬性。

屬性名稱不是從表中提取的，它們已經定義。

例如，將此代碼作為字符串傳遞給javascript函數：

<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>

會返回：

// 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'
}
]

Answer 1

您可以使用此ES6函數：

 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; } 

Answer 2

您可以解析HTML並使用map和reduce來返回預期的對象數組

 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) 

Answer 3

遍歷每個<tr> ，然后遍歷每個<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>