[英]how to convert html table into json desired format
I have a html
table that i want to convert into json
format but i'm not getting correctly. 我有一个html
表,我想将其转换为json
格式,但无法正确获取。
the resultant
json
is not coming according to my format
resultant
json
不按照我的format
here is my table 这是我的桌子
<table class="table" id="example-table">
<thead>
<tr>
<th>Product Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr class="allTheQuotationRow">
<td>flex board</td>
<td contenteditable="" class="priceChangeField">3</td>
<td contenteditable="" class="quantityChangeField">5</td>
<td>15</td>
</tr>
<tr class="allTheQuotationRow">
<td>sign board</td>
<td contenteditable="" class="priceChangeField">20</td>
<td contenteditable="" class="quantityChangeField">1</td>
<td>20</td>
</tr>
<tr class="allTheQuotationRow">
<td>flex board</td>
<td contenteditable="" class="priceChangeField">30</td>
<td contenteditable="" class="quantityChangeField">1</td>
<td>30</td>
</tr>
<tr class="allTheQuotationRow">
<td>sign board</td>
<td contenteditable="" class="priceChangeField">200</td>
<td contenteditable="" class="quantityChangeField">19</td>
<td>3800</td>
</tr>
<tr id="lastTotalRow">
<td>total</td>
<td></td>
<td></td>
<td>3865</td>
</tr>
</tbody>
</table>
i want my desired result to be like this: 我希望我的期望结果是这样的:
{
"flex_board": [
{
"Price": 3,
"Quantity": 5,
"Amount": 15
},
{
"Price": 30,
"Quantity": 1,
"Amount": 30
}
],
"sign_board": [
{
"Price": 20,
"Quantity": 1,
"Amount": 20
},
{
"Price": 200,
"Quantity": 19,
"Amount": 3800
}
],
"total": [
{
"Price": null,
"Quantity": null,
"Amount": 3865
}
]
}
here is my jsfiddle: http://jsfiddle.net/eabangalore/cCzqn/1601/ 这是我的jsfiddle: http : //jsfiddle.net/eabangalore/cCzqn/1601/
Please help me thanks in advance!!! 请提前帮助我!!!
Use querySelectorAll
and Array.from
to iterate the rows ( Comments inline ) 使用querySelectorAll
和Array.from
来迭代行( 内联注释 )
var allRows = Array.from( document.querySelectorAll( "tbody tr:not(:last-child)" ) ); //get all rows except last one
var map = {};
allRows.forEach( function( row ){
var cells = row.children;
var prodName = cells[0].innerText; //index by product name
map[ prodName ] = map[ prodName ] || []; //initialize inner array
map[ prodName ].push({ //push each row to the respective product name's index
Price : cells[1].innerText,
Quantity : cells[2].innerText,
Amount : cells[3].innerText
});
});
console.log( map );
Demo 演示
var allRows = Array.from( document.querySelectorAll( "tbody tr:not(:last-child)" ) ); //get all rows except last one var map = {}; allRows.forEach( function( row ){ var cells = row.children; var prodName = cells[0].innerText; //index by product name map[ prodName ] = map[ prodName ] || []; //initialize inner array map[ prodName ].push({ //push each row to the respective product name's index Price : cells[1].innerText, Quantity : cells[2].innerText, Amount : cells[3].innerText }); }); console.log( map );
<table class="table" id="example-table"> <thead> <tr> <th>Product Name</th> <th>Price</th> <th>Quantity</th> <th>Amount</th> </tr> </thead> <tbody> <tr class="allTheQuotationRow"> <td>flex board</td> <td contenteditable="" class="priceChangeField">3</td> <td contenteditable="" class="quantityChangeField">5</td> <td>15</td> </tr> <tr class="allTheQuotationRow"> <td>sign board</td> <td contenteditable="" class="priceChangeField">20</td> <td contenteditable="" class="quantityChangeField">1</td> <td>20</td> </tr> <tr class="allTheQuotationRow"> <td>flex board</td> <td contenteditable="" class="priceChangeField">30</td> <td contenteditable="" class="quantityChangeField">1</td> <td>30</td> </tr> <tr class="allTheQuotationRow"> <td>sign board</td> <td contenteditable="" class="priceChangeField">200</td> <td contenteditable="" class="quantityChangeField">19</td> <td>3800</td> </tr> <tr id="lastTotalRow"> <td>total</td> <td></td> <td></td> <td>3865</td> </tr> </tbody> </table>
Refactoring an array like that can be a complicated procedure, but thankfully there is a library called lodash that has a function called groupBy. 像这样重构数组可能是一个复杂的过程,但是值得庆幸的是,有一个名为lodash的库,它具有一个名为groupBy的函数。 It can fix your problem in a single line of code! 它可以在一行代码中解决您的问题! _.groupBy(table, "Product Name")
That's really it! 就是这样! Lodash Library Lodash图书馆
You can use reduce
to convert your Array
into desired Object
您可以使用reduce
将Array
转换为所需的Object
$('#convert-table').click(function() {
var table = $('#example-table').tableToJSON();
var result = table.reduce(function(acc, item) {
var key = item["Product Name"].replace(/ /g, "_");
if (!acc[key]) {
acc[key] = []
}
acc[key].push({
Price: item.Price,
Quantity: item.Quantity,
Amount: item.Amount
})
return acc;
}, {});
console.log(result);
});
jsFiddle Link : http://jsfiddle.net/scorpy2007/cCzqn/1603/ jsFiddle链接: http : //jsfiddle.net/scorpy2007/cCzqn/1603/
You can use same tableToJSON data object in generating your customized format as shown below 您可以在生成自定义格式时使用相同的tableToJSON数据对象,如下所示
var jsondata={};
table.forEach( function( data ){
var prodName = data["Product Name"];
jsondata[ prodName ] = jsondata[ prodName ] ?jsondata[ prodName ]: [];
jsondata[ prodName ].push({
Price : data['Price'],
Quantity : data['Quantity'],
Amount : data['Amount']
});
});
console.log(JSON.stringify(jsondata));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.