Looping through JSON array with jQuery

Question

I am trying to loop through a simple JSON array and display the contents with jQuery. My JSON data is:

 {
   "cards":[
      {
         "title":"cat",
         "spanishWord":"gato"
      },
      {
         "title":"dog",
         "spanishWord":"perro"
      }
   ]
}

Here is the jQuery I am using:

    var jqxhr = $.getJSON("http://www.myurl.com/cards.js", function (data) {

        $.each(data.cards, function (i, item) {
            $(".list").append("<li id='" + cards[i].title + "'>" + cards[i].title + cards[i].spanishWord + "</li>");
        });
    });

I am pretty certain the problem is in my each statement but I can't figure out what is wrong.

Answer 1

The problem is inside the loop, where you use cards[i] instead of data.cards[i].

You could also use item instead of data.cards[i].