Question

我有一个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/

请提前帮助我！

Answer 1

使用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>

Answer 2

重构这样的数组可能是一个复杂的过程，但幸运的是有一个名为lodash的库，它有一个名为groupBy的函数。它可以在一行代码中解决您的问题！ _.groupBy(table, "Product Name")

真的是这样！ Lodash Library

http://jsfiddle.net/nhc6m1af/

Answer 3

您可以使用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/

Answer 4

您可以使用相同的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));

Working fiddle here

如何将html表转换为json所需的格式

4 个答案: