Loop in Jquery after Ajax call

Question

I have this script that is working but it return only 1 post from DB table.

I need that all posts of the table is displayed on the page:

$(document).ready(function(){
(function update() {
$.ajax({
  url:"getposts",
  type: "get",  
  data: "{}",
  success: function(data){
    var res = data;
    $.each(res[0], function(index, value) {
        $('#prova').html($('<div class="col-xs-12 col-md-6 col-lg-4 item">\
          <div class="timeline-block">\
              <div class="panel panel-default">\
                <div class="panel-heading">\
                  <div class="media">\
                    <div class="media-left">\
                      <a href="">\
                        <img src="http://bookstar.me/uploads/users/paolo.jpg" width="50px" class="media-object">\
                          </a>\
                        </div>\
                    <div class="media-body">\
                      <a href="#" class="pull-right text-muted"><i class="icon-reply-all-fill fa fa-2x "></i></a>\
                         <a href="">Paolo</a>\
                      <span>1/08/2016</span>\
                 </div>\
                  </div>\
                </div>\
                <div class="panel-body">\
                  <p>'+ value.post +'</p>\
                </div>\
                <div class="view-all-comments">\
                  <a href="#">\
                    <i class="fa fa-comments-o"></i> View all</a>\
                  <span>10 comments</span>\
                </div>\
                <ul class="comments">\
                  <li class="media">\
                    <div class="media-left">\
                      <a href="">\
                        <img src="http://bookstar.me/backend/bookstar/images/people/50/guy-5.jpg" class="media-object"></a>\
                    </div>\
                    <div class="media-body">\
                      <div class="pull-right dropdown" data-show-hover="li">\
                        <a href="#" data-toggle="dropdown" class="toggle-button">\
                          <i class="fa fa-pencil"></i>\
                        </a>\
                        <ul class="dropdown-menu" role="menu">\
                          <li><a href="#">Edit</a></li>\
                          <li><a href="#">Delete</a></li>\
                        </ul>\
                      </div>\
                      <a href="" class="comment-author pull-left">Bill D.</a>\
                      <span>Hi Mary, Nice Party</span>\
                      <div class="comment-date">21st September</div>\
                    </div>\
                  </li>\
                  <li class="media">\
                    <div class="media-left">\
                      <a href="">\
                        <img src="http://bookstar.me/backend/bookstar/images/people/50/woman-5.jpg" class="media-object">\
                      </a>\
                    </div>\
                    <div class="media-body">\
                      <div class="pull-right dropdown" data-show-hover="li">\
                        <a href="#" data-toggle="dropdown" class="toggle-button">\
                          <i class="fa fa-pencil"></i>\
                        </a>\
                        <ul class="dropdown-menu" role="menu">\
                          <li><a href="#">Edit</a></li>\
                          <li><a href="#">Delete</a></li>\
                        </ul>\
                      </div>\
                      <a href="" class="comment-author pull-left">Mary</a>\
                      <span>Thanks Bill</span>\
                      <div class="comment-date">2 days</div>\
                    </div>\
                  </li>\
                  <li class="media">\
                    <div class="media-left">\
                      <a href="">\
                        <img src="http://bookstar.me/backend/bookstar/images/people/50/guy-5.jpg" class="media-object"></a>\
                    </div>\
                    <div class="media-body">\
                      <div class="pull-right dropdown" data-show-hover="li">\
                        <a href="#" data-toggle="dropdown" class="toggle-button">\
                          <i class="fa fa-pencil"></i>\
                        </a>\
                        <ul class="dropdown-menu" role="menu">\
                          <li><a href="#">Edit</a></li>\
                          <li><a href="#">Delete</a></li>\
                        </ul>\
                      </div>\
                      <a href="" class="comment-author pull-left">Bill D.</a>\
                      <span>What time did it finish?</span>\
                      <div class="comment-date">14 min</div>\
                    </div>\
                  </li>\
                  <li class="comment-form">\
                    <div class="input-group">\
                      <span class="input-group-btn">\
               <a href="" class="btn btn-default"><i class="fa fa-photo"></i></a>\
            </span>\
                      <input type="text" class="form-control" />\
                    </div>\
                  </li>\
                </ul>\
              </div>\
            </div>\
            </div>'));
    });
  }
}).then(function() {           // on completion, restart
   setTimeout(update, 1000);  // function refers to itself
});
})();     

Any help is apprecited.

Answer 1

1.Simly change res[0] to res inside the $.each function.

2.Change $('#prova').html() to $('#prova').append()

Answer 2

The reason because you have only one post, is because you put each posts in the same html element #prova .

In that way, you are going to have only the last one, as the jQuery method html() replace all the code.

You should use the append() method instead.

To check, this, just put a debug in the loop, and you will see that there are more posts processed.

And more, an advice, please avoids to put all this html code, it is complicated to read the code.

You should place html in the html page, and use javascript to implement the logic.

Try to use some template engine, like handlebars .

UPDATE:

You're updating the content by your function update() every second through a setTimeout() call.

If you want to refresh all the content, and not to add it again (this depends on the details of your ajax call), you should reset the html content of your element on return of the ajax call, just before the loop.

For example:

$.ajax({
success: function(data) {
   var $prova = $('#prova');
   $prova.html(''); // reset the current content.
   $.each(data, function(index, value) {
       $prova.append('[... your html code here ...]');
   });  
 }
});