如何使用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中循环每一行并使用单元格索引从具有相同索引的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对象转换为vanilla 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>

我希望这有帮助 ：）