[英]how to convert html table into json desired format
我有一個html
表,我想將其轉換為json
格式,但無法正確獲取。
resultant
json
不按照我的format
這是我的桌子
<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>
我希望我的期望結果是這樣的:
{
"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
}
]
}
這是我的jsfiddle: http : //jsfiddle.net/eabangalore/cCzqn/1601/
請提前幫助我!!!
使用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 );
演示
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>
像這樣重構數組可能是一個復雜的過程,但是值得慶幸的是,有一個名為lodash的庫,它具有一個名為groupBy的函數。 它可以在一行代碼中解決您的問題! _.groupBy(table, "Product Name")
就是這樣! Lodash圖書館
您可以使用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鏈接: http : //jsfiddle.net/scorpy2007/cCzqn/1603/
您可以在生成自定義格式時使用相同的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.