jQuery $.each loop and json data

Question

I can't seem to get this working, i am retrieving some json data, and just trying to loop through it an append it to a DIV. here is my code:

HOW THE JSON IS RETURNED (PHP)

{"list":[{"subscribe":"example"},{"subscribe":"example2"},{"subscribe":"example3"},{"subscribe":"example4"},{"subscribe":"example5"}]}

MY JSON CALL USING JQUERY

$.getJSON("article.php",function(data)
   $.each(data.list, function(i,data) {
      var listData = "<li>" + data.subscribe + "</li>";
      $('#lists').append(listData);
   });
});

I am not retrieving any errors in the console, but nothing is happening, i know the call is successful, am i doing the .each loop correctly? can anyone please help?

Have you tried sticking a console.log before your iterative loop to see what data is returned? — Demian Brecht
– Demian Brecht, Commented May 12, 2011 at 5:39

Matthew Schinckel · Accepted Answer · 2012-06-02 04:03:38Z

5

Maybe you can try this:

$.each(data.list, function(i, item) {
    var listData = "<li>" + item.subscribe + "</li>";
    $('#lists').append(listData);
});

Just change function(i, data) to function(i, item).

By reusing the variable name data in the way that you are, you are not actually looping through the array as you expect to.

edited Jun 2, 2012 at 4:03

Matthew Schinckel

35.7k6 gold badges91 silver badges122 bronze badges

answered May 12, 2011 at 7:36

arvil

4434 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gup3rSuR4c · Accepted Answer · 2011-05-12 05:48:31Z

I personally haven't used $.each to loop through an array because I always just do a for loop, so you can try this:

$.getJSON("article.php", function (d) {
    var listsDiv = $("#lists");

    for (var i = 0; i < d.list.length; i++) {
        listsDiv.append("<li>" + d.list[i].subscribe + "</li>");
    };
});

I'm 99% confident that it should work for what you need. Also, it's better to have a variable to your div outside of the loop and append in the loop because right now your code is traversing the DOM for that div for each object in your JSON list.

Also, I'm not sure if you're truncating the JSON response, but you may want to attach a 'success' property and check for that. So you're code would be upgraded to this:

$.getJSON("article.php", function (d) {
    if (d.success) {
        var listsDiv = $("#lists");

        for (var i = 0; i < d.list.length; i++) {
            listsDiv.append("<li>" + d.list[i].subscribe + "</li>");
        };
    } else {
        // Do something else to notify the user that the data could not be retrieved.
    };
});

Ankur · Accepted Answer · 2011-05-12 05:42:41Z

1

Seems you got a syntax error. A { is missing after first line i.e the starting { for "function(data)" in first line

answered May 12, 2011 at 5:42

Ankur

33.7k2 gold badges50 silver badges73 bronze badges

1 Comment

Gup3rSuR4c Over a year ago

+1 Or it's a bad copy/paste, but never the less it's missing. Good job finding that, I looked right passed it, lol...

Collectives™ on Stack Overflow

jQuery $.each loop and json data

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related