Question

I’m having an issue looping out my returned JSON data which looks like this

{
 "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"
        }
    }
    }
  ]
}

My code is as follows:

$("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);
        }
    });
}

Now I’m stuck as to how to loop out each item, I always get undefined or an error. Any direction is appreciated.

Stack Trace from Chrome I believe is:

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

Answer 1

Looks like you want to do something like this:

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.");
}