[英]Convert table HTML to JSON
我有這個:
<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,但是它不適用於每一行的標題:(
假設您只需要獲取每行的第一/第二個單元格作為鍵/值對,則可以使用.reduce()
來對行進行迭代,而只需獲取.cells[0]
和.cells[1]
用作每個鍵/值對:
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
方法獲取一個集合,並使用一個累加器將其縮減為所需的任何狀態。 在這里,我們只是將其簡化為一個對象,因此我們在回調之后傳遞一個。
對於每一行,我們將第一個單元格的內容用作對象鍵,將第二個單元格的內容用作值。 然后,我們從回調中返回對象,以便在下一次迭代中將其返回給我們。
最后, .reduce()
返回我們返回的最后一件事(這當然是我們開始的對象),這就是您的結果。
您可以先將OP中的表轉換為所需的格式,方法是先將其轉換為Object,然后使用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>
但是,這是一個臨時解決方案,因此需要做一些工作才能適應更普遍的情況。 它顯示了這個概念。
注意,不能保證對象屬性將按照表中出現的順序返回,您可能會得到{"Age:":"22","Name:":"Carlos"}
。
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-to-JSON庫在表中期望使用不同的格式。
期望有一個表,其中所有標頭都位於第一行,隨后是數據。
換句話說,期望您的表的結構如下
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Carlos</td>
<td>22</td>
</tr>
</table>
這是在其中工作的JSFiddle的分叉版本 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.