将Html表转换为JSON [英] Converting Html Table to JSON
问题描述
我已经创建了一个将html表转换为JSON的示例应用程序。问题是JSON没有重复值我也想从JSON中删除最后两列。
生成的My JSON如下所示
[
{
人名：史密斯，
得分：取消资格，
价格：150，
税：41
}，
{
人名：杰克逊，
得分：94，
价格：250，
税：81
}，
{
人名：Doe，
得分：80，
价格：950，
税：412
}，
{
人名：约翰逊，
得分：67，
价格：750，
税： 941
}
]
但我期望的JSON就像
[
{
人名：Jill，
人名： 史密斯，
得分：取消资格
}，
{
人名：夏娃，
人名：史密斯，
得分：94
}，
{
人名：约翰，
人名：史密斯，
得分：80
}，
{
人名：亚当，
人名：史密斯，
得分：67
}
]
任何人都可以告诉我如何从表中生成上述JSON
我的代码如下所示。
html代码
< table id ='example -table'>
< thead>
< tr>
< th>人名< / th>
< th>人名< / 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>转换！< / button>
javascript代码
$（'＃convert-table'）。click（function（）{
var table = $（'＃example-table'）。tableToJSON（）;
console.log（table）;
alert（JSON.stringify（table））;
}）;
类似的东西会起作用（不是非常好，但是）
说明：
您可以使用ignoreColumns来避免使用第3列和第4列。 / p>
您可以使用标题来更改标题（json文件中的键）。但这也需要第一行（带TH的那一行）。
因此我们必须在构建json数组后删除第一行。
$（'＃convert-table'）。click（function（）{
var $ table = $（'＃example-table '）;
var table = $ table.tableToJSON（
{
ignoreColumns：[3,4]，
标题：['FirstName'，'LastName' ，'得分']
}）;
var newTable = $ .map（表，函数（e）{
return（e.FirstName ==Person Name）？null：e ;
}）;
console.log（newTable）;
alert（JSON.stringify（newTable））;
}）;
参见 jsfiddle
编辑
如果包含人名的列数是动态的，你可以这样做（假设你从来不想要最后两行）
function convertToTable（el，numberOfColumns， columnNames）{
var columnsToIgnore = [numberOfColumns-2，numberOfColumns-1];
var table = el.tableToJSON（
{
ignoreColumns：columnsToIgnore，
标题：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 = $（这个）.text（）;
返回文本=='人名'？text + index：text;
}）。get（）;
convertToTable（$ table， numberOfColumns，columnNames）;
}）;
请参阅 JsFiddle
I've created a sample application which converts html table into JSON. The problem is that the JSON is not having duplicate values also i want to remove the last two columns from the JSON.
My JSON which has been generated is given below
[
{
"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"
}
]
But my expected JSON is like
[
{
"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"
}
]
Can anyone please tell me how to generate the above JSON from the table
My code is as given below.
html code
<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 code
$('#convert-table').click( function() {
var table = $('#example-table').tableToJSON();
console.log(table);
alert(JSON.stringify(table));
});
something like that would work (not really nice, but)
Explanation :
You can use ignoreColumns to avoid taking columns 3 and 4.
You can use headings to change the "headers" (keys in the json file). But this will take also the first line (the one with the TH).
So we have to remove that first line after building the json array.
$('#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));
});
see jsfiddle
EDIT
If the number of columns with Person Name is dynamic, you could do something like that (assuming you never want the two last rows)
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);
});
see JsFiddle
这篇关于将Html表转换为JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
