gpt4 book ai didi

javascript - 使用 HTML 将 JSON 数据转换为动态表

转载 作者:行者123 更新时间:2023-11-30 16:20:38 25 4
gpt4 key购买 nike

我已经为我的问题寻找解决方案四天了,但我仍然无法解决。

我想使用 JQuery 和 JavaScript 将 JSON 字符串数据(来自 URL)转换为动态表。

我必须使用 jQuery.getJSON() 函数加载 JSON 字符串。我不知道如何将这两件事结合在一起。

我一直在寻找永远,我仍然不明白。对不起,如果我听起来真的很愚蠢,但我就是不能从中得到什么。有人可以帮帮我吗?

这是我的代码:

<html>
<head>
<h1> Inventory List </h1>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://wt.ops.few.vu.nl/api/--------"></script>
</head>

<body>
<script>
$(document).ready(function () {
$.getJSON(http://wt.ops.few.vu.nl/api/-------,
function (json) {
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].category + "</td>");
tr.append("<td>" + json[i].name + "</td>");
tr.append("<td>" + json[i].amount + "</td>");
tr.append("<td>" + json[i].location + "</td>");
tr.append("<td>" + json[i].date + "</td>");
$('#table').append(tr);
}
});
});

</script>

<table id= "table">
<tr>
<th> Name of product</th>
<th> Category</th>
<th> Amount</th>
<th> Location</th>
<th> Date</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

最佳答案

我建议像这样使用 JSONP:https://jsfiddle.net/Twisty/0trde6es/5/

$(document).ready(function() {

getData();

function getData() {
$.ajax({
url: 'https://jsfiddle.net/echo/jsonp/',
method: 'GET',
dataType: "jsonp",
error: function(xhr, status, error) {
console.log(status, error);
},
success: function(json) {
var tr;
$.each(json, function(k, v) {
tr = $("<tr></tr>");
tr.append("<td>" + v.name + "</td>");
tr.append("<td>" + v.category + "</td>");
tr.append("<td>" + v.amount + "</td>");
tr.append("<td>" + v.location + "</td>");
tr.append("<td>" + v.date + "</td>");
$("#invList").append(tr);
});
}
});
}
});

由于该站点可能不在同一个域中,并且未使用 HTTPS,因此我在 a1 中创建了结果数据用于测试。我使用了以下测试数据:

[{"category": "Fruit", "name": "Banana", "amount": 15, "location": "Amsterdam", "date": "2014-10-05", "id": 13844}, {"category": "Fruit", "name": "Apple", "amount": 58, "location": "Amsterdam", "date": "2014-02-05", "id": 13845}, {"category": "Furniture", "name": "Chair", "amount": 3, "location": "Hilversum", "date": "2014-12-10", "id": 13846}, {"category": "Furniture", "name": "Table", "amount": 5, "location": "Rotterdam", "date": "2011-07-13", "id": 13847}]

使用 $.each() 只是一种处理对象数据的更快方法。您的 for() 循环没有任何问题,并且可能会根据您的需要更好地工作。

关于javascript - 使用 HTML 将 JSON 数据转换为动态表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34795362/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com