将 table HTML 转换为 JSON

Question

我有这个：

<table>
    <tr>
        <th>Name:</th>
        <td>Carlos</td>
    </tr>        
    <tr>
        <th>Age:</th>
        <td>22</td>
    </tr>
</table>

我需要 JSON 格式。

{"Name":"Carlos","Age": 22}

我试过 https://github.com/lightswitch05/table-to-json 但它对每一行的标题都不起作用 :(

编辑：http://jsfiddle.net/Crw2C/773/

Answer 1

您可以将 OP 中的 table 转换为所需的格式，方法是先将其转换为对象，然后使用 JSON.stringify 获取所需的字符串：

<table id="t0">
    <tr>
        <th>Name:</th>
        <td>Carlos</td>
    </tr>        
    <tr>
        <th>Age:</th>
        <td>22</td>
    </tr>
</table>

<script>

function tableToJSON(table) {
  var obj = {};
  var row, rows = table.rows;
  for (var i=0, iLen=rows.length; i<iLen; i++) {
    row = rows[i];
    obj[row.cells[0].textContent] = row.cells[1].textContent
  }
  return JSON.stringify(obj);
}

console.log(tableToJSON(document.getElementById('t0'))); // {"Name:":"Carlos","Age:":"22"}"

</script>

但是，这是一个临时解决方案，因此需要一些工作才能适应更一般的情况。它显示了这个概念。

请注意，不能保证对象属性将按照它们在 table 中出现的相同顺序返回，您可能会得到 {"Age:":"22","Name:":"Carlos"}.

Answer 2

假设您只需要获取每行的 first/second 个单元格作为 key/value 对，您可以使用 .reduce() 迭代行并获取文本内容.cells[0] 和 .cells[1] 用作每个 key/value 对：

var t = document.querySelector("table");

var j = [].reduce.call(t.rows, function(res, row) {
    res[row.cells[0].textContent.slice(0,-1)] = row.cells[1].textContent;
    return res
}, {});

document.querySelector("pre").textContent = JSON.stringify(j, null, 2);

<table>
    <tr>
        <th>Name:</th>
        <td>Carlos</td>
    </tr>        
    <tr>
        <th>Age:</th>
        <td>22</td>
    </tr>
</table>
<pre></pre>

Array.prototype.reduce 方法接受一个集合并使用累加器将其减少到您想要的任何状态。这里我们只是把它缩减为一个对象，所以我们在回调之后传入一个。

对于每一行，我们使用第一个单元格的内容作为对象键，第二个单元格的内容作为值。然后我们 return 回调中的对象，以便在下一次迭代中返回给我们。

最后，.reduce() return 是我们 return 编辑的最后一件事（当然是我们开始的对象），这就是您的结果。

Answer 3

您正在使用的 Table-to-JSON library 需要在您的 table 中使用不同的格式。

它期待一个 table，第一行是你所有的 headers，然后是后续行的数据。

换句话说，它期望您的 table 结构如下

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>        
    <tr>
        <td>Carlos</td>
        <td>22</td>
    </tr>
</table>

这里是 a forked version of your JSFiddle 它正在工作的地方。

Answer 4

var t = document.querySelector("table");

var j = [].reduce.call(t.rows, function(res, row) {
    res[row.cells[0].textContent.slice(0,-1)] = row.cells[1].textContent;
    return res
}, {});

document.querySelector("pre").textContent = JSON.stringify(j);

<table>
    <tr>
        <th>Name:</th>
        <td>Carlos</td>
    </tr>        
    <tr>
        <th>Age:</th>
        <td>22</td>
    </tr>
</table>
<pre></pre>

将 table HTML 转换为 JSON

Convert table HTML to JSON

html

javascript

json

html-table