CODEWITHSUNDEEP
jqueryajax
mrnvdvmv
mrnvdvmv

Reputation: 33

can't proper loop using ajax in jquery

I always get the last value from json file, which then fades every 5 seconds. What should I do, so each value in json will appear and disappear? :(

   $.ajax({
         type:'GET',
         url: root + '/posts/1/comments'
           }).then(function(data){       
           $.each(data,function( i, content) {
             $('#news').html('<h3>'+ content.name + '</h3><p>' + content.name +'</p>)
                      .fadeIn().delay(5000).fadeOut('slow');  
               });                    
           });
});

Upvotes: 0

Views: 36

Answers (1)

Dylan Stark
Dylan Stark

Reputation: 2395

Im assuming you are trying to display a new piece of content in #news every 5 seconds. When you use delay(5000) it is not waiting for the last delay event to finish before firing the next one in sequence.

Instead try saving the data returned by AJAX to an array and create a function that iterates through this array. Use javascript's setTimeout to fire your new function every 5 seconds until it runs out of news items.

var news,
    newsCount,
    i;

function updateNews(){
    if (i < newsCount) {
        // add news[i] to your HTML here //
        i++;

        setTimeout(function(){
            updateNews();
        },5000);
    }
}

$.ajax({
    type: 'GET',
    url: root + '/posts/1/comments'
}).then(function(data) { 
    news = data;
    newsCount = news.length;
    i = 0;
    updateNews();
});

Upvotes: 1

Related Questions