如何解决用jQuery迭代并显示JSON数据
| 我必须在html表中显示一组记录。我为此使用PHP和jQuery。 这是我的结果集,使用ѭ0检索 这是beta.php的输出[{\"StuId\":\"1\",\"fName\":\"Saman\",\"lName\":\"Kumara\",\"age\":\"14\",\"grade\":\"A\"},{\"StuId\":\"2\",\"fName\":\"Marry\",\"lName\":\"Vass\",\"age\":\"12\",\"grade\":\"B\"},{\"StuId\":\"3\",\"fName\":\"Navjoth\",\"lName\":\"Bogal\",\"age\":\"32\",{\"StuId\":\"4\",\"fName\":\"Jassu\",\"lName\":\"Singh\",\"age\":\"22\",\"grade\":\"E\"}]
我使用a2ѭ页面,将上述结果打印在表格中
$(document).ready(function(){
$getJSON(\'beta.php\',function(data){
$.each(data,function(){
$.each(this,function(key,value){
$(\"<table>\").appendTo(\"document.body\");
$(\"<table>\").html(\"<tr><td>\" + value.StuId + \"</td><td>\" + value.fName + \"</td><td>\" + value.lName + \"</td><td>\" + value.age + \"</td><td>\" + value.grade + \"</td></tr>\");
});
});
});
});
这给出一个错误,说ѭ4
如果有人可以帮助我,我将不胜感激。
好吧,当我按如下所示更改代码时,我可以打印记录集中的第一条记录。
但是我不明白为什么$ .each()无法正常工作????
$(\"table\").html(\"<tr><td>\" + data[0].StuId + \"</td><td>\" + data[0].fName + \"</td><td>\" + data[0].lName + \"</td><td>\" + data[0].age + \"</td><td>\" + data[0].grade + \"</td></tr>\");
我也尝试过使用for循环,但是它仅输出最后一行
$.getJSON(\'beta.php\',function(data){
$.each(data,value){
for(var x=0; x < data.length; x++){
$(\"table\").html(\"<tr><td>\" + data[x].StuId + \"</td><td>\" + data[x].fName + \"</td><td>\" + data[x].lName + \"</td><td>\" + data[x].age + \"</td><td>\" + data[x].grade + \"</td></tr>\");
$(\"table\").appendTo(\"document.body\");
}
});
})
任何人都可以对此发表您的意见:)
解决方法
$(document).ready(function(){
$.getJSON(\'beta.php\',function(data){
$.each(data,function(){
$(\"<table/>\").appendTo(\"document body\")
.html(\"<tr><td>\" + this.StuId + \"</td><td>\" + this.fName + \"</td><td>\" + this.lName + \"</td><td>\" + this.age + \"</td><td>\" + this.grade + \"</td></tr>\");
});
});
});
在第一个示例中,您将一个新表附加到文档,然后将内容附加到另一个新表。在第二次和第三次尝试中,设置文档中存在的第一个表格元素的内容。
编辑:并且您迭代太深,一次迭代就足够了。
, 试试看
$.getJSON(\"beta.php\",function(data) {
var table = $(\"<table>\").appendTo(document.body);
$.each(data,function(i,row) {
var tr = $(\"<tr>\").appendTo(table);
$(\"<td>\").appendTo(tr).html(row.StuId);
$(\"<td>\").appendTo(tr).html(row.fName);
$(\"<td>\").appendTo(tr).html(row.lName);
$(\"<td>\").appendTo(tr).html(row.age);
});
});
干杯
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。