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

Posted

技术标签:

【中文标题】如何在运行时使用 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>

我希望这会有所帮助:)

【讨论】:

以上是关于如何在运行时使用 jquery 创建 json 对象数组?的主要内容,如果未能解决你的问题,请参考以下文章

如何迭代 JSON 以创建表的主体 - jQuery tmpl/template

在运行时使用 jQuery 创建 CSS 规则/类

如何使用 JSON 和 jQuery 在 Rails 2.3.5 中显示服务器错误

对动态表行使用 jquery 数据表

如何使用从 API 调用返回的 JSON 数据使 jquery 自动建议

如何使用 jQuery 对 JSON 数据进行分页?