gpt4 book ai didi

javascript - 如何使用jquery解析json对象并在html页面中以表格格式打印输出?

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

我编写了一个程序,用于根据从数据库获取的值列表创建 json 对象,这是我的 json 的外观

{
1: {
age: "21",
name: "arjun",
gender: "male"
},
2: {
age: "30",
name: "ravi",
gender: "male"
},
3: {
age: "57",
name: "pushpa",
gender: "female"
}
}

现在我想使用 jquery 解析它并以 html 的表格形式打印结果。我已经尝试了一定程度,但不明白该怎么做,所以请需要一些指导

我的 json_parse.js :

$(document).ready(function() {
var url = "http://182.168.1.115:8082/JqueryForm/userdetails_json.jsp"
$.parseJSON(url, function(json) {
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].name + "</td>");
tr.append("<td>" + json[i].age + "</td>");
tr.append("<td>" + json[i].gender + "</td>");
$("#table").append(tr);
}
});

});

我的list_user.html:

<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="json_parse.js"></script>
</head>
<body>
<table name="Table" id="table">

</table>
</div>
</body>
</html>

最佳答案

那么你有几个问题:

  1. 您应该使用jQuery.getJSON()不是jQuery.parseJSON()
  2. 您的 JSON 不是数组,因此未定义长度,因此您无法按原样循环遍历它。

简单的修复方法是使用 jQuery.each() 重写循环。枚举您的对象:

$.each(json, function(i) {
var tr = $('<tr/>');
tr.append("<td>" + json[i].name + "</td>");
tr.append("<td>" + json[i].age + "</td>");
tr.append("<td>" + json[i].gender + "</td>");
$("#table").append(tr);
});

下面有一个工作片段,可以查看它的实际效果。

$(document).ready(function() {
var json = { 1: {age: "21", name: "arjun",gender: "male"}, 2: {age: "30",name: "ravi",gender: "male"}, 3: {age: "57", name: "pushpa", gender: "female"}};

$.each(json, function(i) {
var tr = $('<tr/>');
tr.append("<td>" + json[i].name + "</td>");
tr.append("<td>" + json[i].age + "</td>");
tr.append("<td>" + json[i].gender + "</td>");
$("#table").append(tr);
});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table"></table>

关于javascript - 如何使用jquery解析json对象并在html页面中以表格格式打印输出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29015723/

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