如何在运行时使用 jquery 创建 json 对象数组？

Posted 2023-05-08

【中文标题】如何在运行时使用 jquery 创建 json 对象数组？

【英文标题】：How do i create array of json object at runtime using jquery?

【发布时间】：2019-03-01 04:56:48

【问题描述】：

我正在尝试使用 jquery 从 html 表中获取 json 对象数组。该表和数据将在运行时确定并保存不同的数据。 所以我想从 tad 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 做到这一点？

【问题讨论】：

已经是jquery了

包含 jquery？

我不想这样做。 “姓名”：$(this).find('td:eq(0)').html()，“性别”：$(this).find('td:eq(1)').html()。 . 表可能有列名“City”或“Country”。我想在运行时确定这个值

您想要 JSON 对象的 javascript 数组还是 JSON 对象数组？

JSON 是一个具有已定义格式规范的字符串，对象可以派生自或派生到（序列化/反序列化）。

【参考方案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>

【讨论】：

它应该适用于任意数量的属性jsfiddle.net/5L27pkt3/2

哇，这和我的一模一样：D

【参考方案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>

【参考方案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);

【参考方案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>

我希望这会有所帮助:)