如何在运行时使用 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
如何使用 JSON 和 jQuery 在 Rails 2.3.5 中显示服务器错误