我如何在運行時使用jquery創建json對象數組？

Question

我正在嘗試使用jquery從html表中獲取json對象的數組。 該表和數據將在運行時確定並保存不同的數據。 所以我想從thead td獲取json對象的屬性，並從tbody td獲取值。

 <table id="myTable"> <thead> <tr> <td>Name</td> <td>Gender</td> </tr> </thead> <tbody> <tr> <td>Mary Jane</td> <td>Female</td> </tr> <tr> <td>Peter Parker</td> <td>Male</td> </tr> </tbody> </table> 

我能夠創建json對象的數組，但我必須編寫硬編碼的屬性。 var jsonList = [{"Name":"Mary Jane", "Gender":"Female"},{"Name":"Peter Parker", "Gender":"Male"}]

我的代碼：

 var data = []; var target = $('#myTable tr').not('thead tr'); target.each(function (i) { console.log($(this).find('td:eq(0)').html()); data.push({ "Name": $(this).find('td:eq(0)').html(), "Gender": $(this).find('td:eq(1)').html() }); }); var json =JSON.stringify(data); 

我如何使用jquery做到這一點？

Answer 1

您可以首先從thead中獲取數組中的單元格，然后在tbody循環每一行，並使用cell index從具有相同索引的thead中獲取屬性名稱。

 let th = $("#myTable thead tr td").map(function() { return $(this).text() }).get(); let data = $("#myTable tbody tr").map(function() { return Array.from($(this).find("td")).reduce(function(r, td, i) { r[th[i]] = td.textContent; return r; }, {}) }).get() console.log(data) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="myTable"> <thead> <tr> <td>Name</td> <td>Gender</td> </tr> </thead> <tbody> <tr> <td>Mary Jane</td> <td>Female</td> </tr> <tr> <td>Peter Parker</td> <td>Male</td> </tr> </tbody> </table> 

Answer 2

 var headers = $('#myTable thead tr:eq(0)').find('td, th').map(function () { return $(this).text(); }).get(); var data = $('#myTable tbody tr').map(function () { return Array.from($(this).find('td')).reduce(function (accumulator, current, index) { accumulator[headers[index]] = $(current).text(); return accumulator; }, {}); }).get(); var json = JSON.stringify(data); console.log(json); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="myTable"> <thead> <tr> <td>Name</td> <td>Gender</td> </tr> </thead> <tbody> <tr> <td>Mary Jane</td> <td>Female</td> </tr> <tr> <td>Peter Parker</td> <td>Male</td> </tr> </tbody> </table> 

Answer 3

你去

var a = $(`<table id="myTable">
  <thead>
    <tr>
      <td>Name</td>
      <td>Gender</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mary Jane</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>Peter Parker</td>
      <td>Male</td>
    </tr>
  </tbody>
</table>`);

var keys = a
  .find("thead tr td")
  .toArray()
  .map(x => x.textContent);

var result = a
  .find("tbody tr")
  .map((i, tr) => {
    var obj = {};
    $(tr)
      .find("td")
      .each((i, td) => (obj[keys[i]] = td.innerText));
    return obj;
  })
  .toArray();

console.log(result);

Answer 4

如果您能夠編輯HTML，可以采取一些措施使此操作變得容易一些：

首先，我將thead中的td更改為th 。 這將有助於JavaScript，並且在語義上也更好。

 var data = []; var $myTable = $('#myTable'); //keeping the table in memory is a bit more effcient var labels = $myTable.find('thead th').toArray().map(function(th) { //toArray converts the jQuery object to a standard JavaScript array so that we can use the native .map method. return th.innerHTML.trim(); //innerHTML is like jQuery .text(), .trim() removes any whitespace on the left or right. }); //["Name","Gender"] var $rows = $myTable.find('tbody tr'); $rows.each(function() { var $row = $(this); var row_data = {}; for (let i = 0; i < labels.length; i++) { //native JS for loop row_data[labels[i]] = $row.find('td:eq(' + i + ')').text().trim(); } data.push(row_data); }); console.log(data); var json_data = JSON.stringify(data); //array of objects in string format 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="myTable"> <thead> <tr> <th>Name</th> <th>Gender</th> </tr> </thead> <tbody> <tr> <td>Mary Jane</td> <td>Female</td> </tr> <tr> <td>Peter Parker</td> <td>Male</td> </tr> </tbody> </table> 

那么JavaScript到底是怎么回事？ 首先，我將表作為$ myTable保留在內存中，並從那里查找我們需要的元素。 為了找到標簽，我使用jQuery .toArray（）將jQuery對象轉換為普通JavaScript數組，以便我們可以使用.map（） 。 Map是一個非常有用的方法，因為您從回調返回的任何內容都會被推送到我稱為標簽的新數組上。

接下來，我們從$ myTable獲取所有行，並像您一樣在它們上循環。 我沒有對對象鍵進行硬編碼，而是遍歷了我們之前制作的標簽數組。 我還使用臨時變量i查找所需的td。 最后，將構造的對象推到數組的末尾。

請注意！！ 那就是頁面上有任何損壞的HTML，或者一行中有一些丟失的數據，您的數據也會有問題。 如果您能夠編輯HTML，但需要JavaScript中的數據，則建議使用application / json標記，如下所示：

 var $myData = $('#myData'); var json_data = $myData.text(); //if you just need string data, stop here! console.log(json_data); var data = JSON.parse(json_data); console.log(data); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script id="myData" type="application/json"> [{ "Name": "Mary Jane", "Gender": "Female" }, { "Name": "Peter Parker", "Gender": "Male" }] </script> 

我希望這有幫助 ：）