如何通过.each循环将json数据处理到html表中
[英]how to process json data through an .each loop into html table
问题描述
I am making an ajax get request that displays json data in a html table. 
我正在提出一个ajax获取请求，以在html表中显示json数据。 I know how to do this with javascript, so I thought I'd try it with jquery. 我知道如何用javascript做到这一点，所以我想我可以用jquery尝试一下。 There is a problem in my .each loop. 我的.each循环中有问题。 I am vague on how the arguments (key, object) process more than one key value pair in each position and suspect this is where my error lies. 我对参数(key, object)在每个位置上如何处理多个键值对不清楚，并且怀疑这是我的错误所在。
I have tried JSON.parse , but that didn't help. 我已经尝试过JSON.parse ，但这没有帮助。 I am definitely getting the data as I can display it in an alert box. 我肯定会得到数据，因为我可以在警报框中显示它。 I suspect that what I'm doing is not industry standard and that there is a more elegant way to reach my objective. 我怀疑我正在做的不是行业标准，并且还有一种更优雅的方法可以实现我的目标。
$("#button").click(function(){
$.ajax({
type: 'get',
url: "http://www.adweb.agency/interview/api/animals",
data: {format: 'json' },
dataType: 'json',
success: function(data){
var i = 0;
var table = '<table class="mainTable"><tr><th>item</th><th>image</th><th>description</th></tr>';
$.each(data, function(key, object){
table += ('<tr>');
table += ('<td>' + data.Title + '</td>');
table += ('<td><img src="' + data.ImageURLs.Thumb + '"></td>');
table += ('<td>' + data.Description + '</td>');
table += ('</tr>');
});
table += '</table>';
$('#tableContainer').html(table);
}
});
});
3 个解决方案
解决方案1
1 2016-06-30 16:18:54
Assuming that your response variable 'data' is an array, you're accessing the wrong variable inside each iteration of your each loop: 假设您的响应变量“数据”是一个数组，那么您在每个循环的每次迭代中都访问了错误的变量：
$("#button").click(function(){
$.ajax({
type: 'get',
url: "http://www.adweb.agency/interview/api/animals",
data: {format: 'json' },
dataType: 'json',
success: function(data){
var i = 0;
var table = '<table class="mainTable"><tr><th>item</th><th>image</th><th>description</th></tr>';
// NOTE! I changed 'object' to 'value' here
// NOTE 2! We added a JSON.parse on the 'data' variable to convert from JSON to JavaScript objects.
$.each(JSON.parse(data), function(key, value){
// We need to access the value variable in this loop because 'data' is the original array that we were iterating!
table += ('<tr>');
table += ('<td>' + value.Title + '</td>');
table += ('<td><img src="' + value.ImageURLs.Thumb + '"></td>');
table += ('<td>' + value.Description + '</td>');
table += ('</tr>');
});
table += '</table>';
$('#tableContainer').html(table);
}
});
});
See the comments in the above code for the changes. 有关更改，请参见上面的代码中的注释。
See the docs on jQuery's .each() iterator here . 查看jQuery的。每次的文档（）迭代在这里 。
解决方案2
1 已采纳 2016-06-30 16:56:13
here's the right code that you need, just copy and paste, regards! 这是您需要的正确代码，只需复制并粘贴，就可以了！
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<input id = "btnSubmit" type="button" value="Release"/>
<div id="tableContainer">
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#btnSubmit").click(function(){
$.ajax({
dataType: 'json',
url: "http://www.adweb.agency/interview/api/animals",
type: 'get',
success: function (data) {
var i = 0;
var table = '<table class="mainTable"><tr><th>item</th><th>image</th><th>description</th></tr>';
data = $.parseJSON(data)
$.each(data, function (idx, obj) {
table += ('<tr>');
table += ('<td>' + obj.Title + '</td>');
table += ('<td><img src="' + obj.ImageURLs.Thumb + '"></td>');
table += ('<td>' + obj.Description + '</td>');
table += ('</tr>');
});
table += '</table>';
$("#tableContainer").html(table);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("some error");
}
});
});
});
</script>
</body>
</html>
解决方案3
0 2016-06-30 16:14:55
Try this code: 试试这个代码：
$.each(data, function(key, object){
table += '<tr>';
table += '<td>' + data[key].Title + '</td>';
table += '<td><img src="' + data[key].ImageURLs.Thumb + '"></td>';
table += '<td>' + data[key].Description + '</td>';
table += '</tr>';
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.