我在循环出我返回的 JSON 数据时遇到问题,看起来像这样
{
"max": "12",
"page": null,
"total": 12,
"items": [
{
"14bfa6bb14875e45bba028a21ed38046": {
"id": "69",
"title": "Protein Packed Meatloaf",
"image": "nopic.jpg",
"link": "protein-packed-meatloaf.html",
"description": "This meatloaf is packed with protein to help your muscles grow.",
"category": "Dinner",
"comment_count": "0 Comments",
"ingredient_count": 7,
"ate_this": 0,
"rating": "5",
"nutritional": {
"calories": "205.00",
"protein": "20.55",
"carbohydrate": "7.70",
"fat": "9.64"
}
}
}
]
}
我的代码如下:
$("select,input[type=checkbox]").change(function(){ inits(); });
$("input[type=text],textarea").keystop(function(){ inits(); });
b = "form#recipeSearch";
c = $(b).attr('action') + '?r';
f = "#searchResults";
function inits(){
console.log('Search Init');
$.ajax({
url: c,
cache: false,
dataType: 'json',
data: $(b).serialize(),
beforeSend: function(l) {},
success: function(response) {
console.log('Link: ' + c + $(b).serialize());
//response = JSON.stringify(response);
if (response) {
$(f).empty();
$.each(response, function(i,data){
var template = ' <div id="item-' + items.id + '" class="list-item"> '
+ ' <a href="' + items.link + '" rel="popover" title="' + items.title + '" data-content="' + items.description + '"><img src="' + items.image + '" alt="' + items.title + '"></a>'
+ ' <div id="title-description">'
+ ' <h4><a href="' + items.link + '">' + items.title+ '</a></h4>'
+ ' ' + items.rating + ' '
+ ' <span class="webSymbol">,</span> Posted in <a href="' + items.category + '">' + items.category + '</a> '
+ ' <span class="webSymbol">²</span> ' + items.ingredient_count + ' '
+ ' <span class="webSymbol">U</span> ' + items.ate_this + ' '
+ ' <span class="webSymbol">c</span> ' + items.comment_count + ''
+ ' <p id="description">' + items.description + '</p>'
+ ' </div>'
+ ' </div>';
$(f).html(template);
});
}
},
error: function(e, jqxhr, settings, exception) {
console.log('Link: ' + c + $(b).serialize());
console.log('Error: ' + e.toString() + ' - ' + jqxhr);
}
});
}
现在我对如何循环出每个项目感到困惑,我总是得到未定义或错误。任何方向表示赞赏。
我相信来自 Chrome 的堆栈跟踪是:
Uncaught ReferenceError: items is not defined
(anonymous function) min.js:521
e.extend.each jquery.min.js:2
$.ajax.success min.js:519
o jquery.min.js:2
p.fireWith jquery.min.js:2
w jquery.min.js:4
d