[英]how to process json data through an .each loop into html table
我正在提出一個ajax獲取請求,以在html表中顯示json數據。 我知道如何用javascript做到這一點,所以我想我可以用jquery嘗試一下。 我的.each
循環中有問題。 我對參數(key, object)
在每個位置上如何處理多個鍵值對不清楚,並且懷疑這是我的錯誤所在。
我已經嘗試過JSON.parse
,但這沒有幫助。 我肯定會得到數據,因為我可以在警報框中顯示它。 我懷疑我正在做的不是行業標准,並且還有一種更優雅的方法可以實現我的目標。
$("#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);
}
});
});
假設您的響應變量“數據”是一個數組,那么您在每個循環的每次迭代中都訪問了錯誤的變量:
$("#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);
}
});
});
有關更改,請參見上面的代碼中的注釋。
查看jQuery的。每次的文檔()迭代在這里 。
這是您需要的正確代碼,只需復制並粘貼,就可以了!
<!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>
試試這個代碼:
$.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.