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.

• codeandcloud: item.title will be cleaner

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].

• user715564: Perfect, thanks! I'll accept your answer when the time limit is up.
• Michael Geary: Be sure to use item instead of data.cards[i]. Much cleaner!