我创建了一个将 html 表转换为 JSON 的示例应用程序。问题是 JSON 没有重复值,我也想从 JSON 中删除最后两列。
我生成的 JSON 如下所示
[
{
"Person Name":"Smith",
"Score":"disqualified",
"Price":"150",
"Tax":"41"
},
{
"Person Name":"Jackson",
"Score":"94",
"Price":"250",
"Tax":"81"
},
{
"Person Name":"Doe",
"Score":"80",
"Price":"950",
"Tax":"412"
},
{
"Person Name":"Johnson",
"Score":"67",
"Price":"750",
"Tax":"941"
}
]
但我期望的 JSON 是这样的
[
{
"Person Name":"Jill",
"Person Name":"Smith",
"Score":"disqualified"
},
{
"Person Name":"Eve",
"Person Name":"Smith",
"Score":"94"
},
{
"Person Name":"John",
"Person Name":"Smith",
"Score":"80"
},
{
"Person Name":"Adam",
"Person Name":"Smith",
"Score":"67"
}
]
谁能告诉我如何从表中生成上述 JSON
我的代码如下。
html代码
<table id='example-table'>
<thead>
<tr>
<th>Person Name</th>
<th>Person Name</th>
<th data-override="Score">Points</th>
<th>Price</th>
<th>Tax</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td data-override="disqualified">50</td>
<td>150</td>
<td>41</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>250</td>
<td>81</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
<td>950</td>
<td>412</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>750</td>
<td>941</td>
</tr>
</tbody>
</table>
<button id="convert-table" >Convert!</button>
javascript代码
$('#convert-table').click( function() {
var table = $('#example-table').tableToJSON();
console.log(table);
alert(JSON.stringify(table));
});
最佳答案
类似的东西会起作用(不是很好,但是)
解释:
您可以使用 ignoreColumns 来避免获取第 3 列和第 4 列。
您可以使用标题来更改“标题”(json 文件中的键)。但这也将占用第一行(带有 TH 的行)。
所以我们必须在构建 json 数组后删除第一行。
$('#convert-table').click( function() {
var $table = $('#example-table');
var table = $table.tableToJSON(
{
ignoreColumns:[3, 4],
headings: ['FirstName', 'LastName', 'Score']
});
var newTable = $.map(table, function(e){
return (e.FirstName == "Person Name") ? null : e;
});
console.log(newTable);
alert(JSON.stringify(newTable));
});
参见 jsfiddle
编辑
如果 Person Name 的列数是动态的,你可以做类似的事情(假设你永远不需要最后两行)
function convertToTable(el, numberOfColumns, columnNames) {
var columnsToIgnore = [numberOfColumns-2, numberOfColumns-1];
var table = el.tableToJSON(
{
ignoreColumns:columnsToIgnore,
headings: columnNames
});
var result = $.map(table, function(e){
return (e['Person Name0'] == "Person Name") ? null : e;
});
alert(JSON.stringify(result));
}
$('#convert-table').click( function() {
var $table = $('#example-table');
var columns = $table.find('th');
var numberOfColumns = columns.length;
var columnNames = columns.map(function(index) {
var text = $(this).text();
return text == 'Person Name' ? text + index : text;
}).get();
convertToTable($table, numberOfColumns, columnNames);
});
参见 JsFiddle
关于javascript - 将 Html 表转换为 JSON,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21461102/