Loop through JSON feed items with set interval and replace previous item

I've written some jQuery to get each item from JSON request and insert to an HTML table, this inserts it only once. I want to be able to hide the previous item and insert the next item from JSON request one at a time in a continuous loop, every 3 seconds for example. I've had a go at trying loops but I couldn't get it to work,开发者_StackOverflow中文版 so just asking for some help on this!

What I have so far: http://jsfiddle.net/saffad/tZxKr/1/

JSON request looks like this:

{
    "results": [
        {
             "member_photo": {
                 "thumb_link": "foo.jpeg"
             },
             "member_name": "Daniel",
             "comment": "this is cool"
        },
        {
             "member_photo": {
                "thumb_link": "blah.jpeg"
             },
             "member_name": "John",
             "comment": "hello everyone"
        },
        ....
  ]
}

Just do this:

EDIT: Now it loops continously.

function displayComments(data) {
    window.nAux = data.results.length;
    $.each(data.results, function(i,item) {
        (new Image()).src = item.member_photo.thumb_link; //Preload image (optional)
        setTimeout(function(){
            $(".comments").hide();
            $(".comments").find("img.thumb").attr('src', item.member_photo.thumb_link);
            $(".comments").find("td.comment").text(item.comment);
            $(".comments").find("td.name").text(item.member_name);
            $('.comments').fadeIn('slow');
            if(--window.nAux == 0) //If cycle ended...
               setTimeout(function(){ displayComments(data); }, 6000); //Start again in 6 seconds
        }, 6000*i); //Wait 6 seconds

    });
}

I tested it in your jsfiddle and runs ok :)

Hope this helps. Cheers

If you are getting comments every 3 seconds, I would try to append to a div. The comment div needs to have a distinguishing id. That id can be the id of the comment.

You might need to find the id of the last comment you processed. Either you can store in a hidden field or some global var.

Once you have a new comment in, you append the new one. You then hide the comment you processed last.

This should be simple.

The accepted answer for the question doesn't do what the user actually asked for. Here is my go which does. There updated fiddle is here

$.getJSON("http://api.meetup.com/2/event_comments.json/?key=4b247e365978741497368536d603830&sign=true&event_id=16827758&fields=member_photo&callback=?", displayComments);

function displayComments(data) {

    var results = data.results,
        iterator = function (array, number) {
            // This function allows you to iterated through an
            // returning the next item(s) the count determined by the             // given number from the array.
            var current = 0,
            length = array.length;

            return function () {
                end = current + number;
                var part = array.slice(current, end);
                if (end > length) {
                    end = end % length;
                    part = part.concat(array.slice(0, end));
                }
                current = end;
                return part;
            };
        },
        // Get the first commment.
        next = iterator(results,1),
        firstRun = true,
        speed = 5000,

        loadComment = function(){
        // Load the comments one by one.
            var item = next()[0],
                $commentContainer = $(".comments");
            buildComment = function(){

                $commentContainer.find("img.thumb").attr('src', item.member_photo.thumb_link);
                $commentContainer.find("td.comment").text(item.comment);
                $commentContainer.find("td.name").text(item.member_name);

                $commentContainer.fadeIn('slow');

            };
            // hide the container and populate/show on callback.
            $commentContainer.fadeOut("slow", null, buildComment);

            // Set interval after first run.
            if (firstRun){
               firstRun = false;
               setInterval(loadComment,speed);   
            }
        };

       // Load the first comment.
       loadComment();
}

var results = what_you_said_above;
var idx = -1;
function rotateThingy(){
  if (++idx == results.length)
    idx = 0;
  document.getElementById('yourElemId').innerHTML = results[idx].member_name;
}
setInterval('rotateThingy', 3000);