Javascript 通过$.ajax方法将JSON循环到模板中

我在循环返回的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 + ' &nbsp;'
                             + '           <span class="webSymbol">,</span> Posted in <a href="' + items.category + '">' + items.category + '</a> &nbsp;'
                             + '           <span class="webSymbol">&#178;</span> ' + items.ingredient_count + ' &nbsp;'
                             + '           <span class="webSymbol">U</span> ' + items.ate_this + ' &nbsp;'
                             + '           <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);
        }
    });
}

---

看起来您希望执行以下操作：

if(response.items) { // Are there items in the response?
  $.each(response.items, function(idx,item) { // For each item in the array.
    // Now you can reference things like this.
    item.id;
    item.link;
  }
}
else {
  // Log stuff. It's a good habit to start doing.
  console.log("There are no items in the response.");
}

---

很抱歉，它和您的一样，但随后我收到--uncaughtreferenceerror:item未定义您是否在Chrome或Firebug中调试它？你没有要查看的堆栈跟踪吗？您应该能够准确地看到错误所在的行。好的，我做了一些更改。试一试。

如果（生产）{console.log=function（）{}}

这是另一个问题，当你陷入困境时，你应该创建一个新问题。非常确定jQuery有一个分页插件。首先：console.log（响应）；我认为应该有

response而不是
g
。items

code也用堆栈跟踪进行了更新。您是否在控制台中检查了响应？

if(response.items) { // Are there items in the response?
  $.each(response.items, function(idx,item) { // For each item in the array.
    // Now you can reference things like this.
    item.id;
    item.link;
  }
}
else {
  // Log stuff. It's a good habit to start doing.
  console.log("There are no items in the response.");
}