成功后的Ajax循环

时间:2016-08-05 12:11:05

标签: jquery json ajax laravel-5.1

我有这个json回复

    [[{"id":73,"entry_by":"5","post":"Prova","location":"","images":"","tagged_friends":0,"created_at":"2016-08-05
 07:17:14","updated_at":"2016-08-05 07:17:14","post_type":0,"comments_open":0,"is_blocked":0,"is_share"
:0,"video":"","book_id":0,"author_id":0},{"id":72,"entry_by":"5","post":"Prova","location":"","images"
:"","tagged_friends":0,"created_at":"2016-08-05 06:59:18","updated_at":"2016-08-05 06:59:18","post_type"
:0,"comments_open":0,"is_blocked":0,"is_share":0,"video":"","book_id":0,"author_id":0},{"id":71,"entry_by"
:"5","post":"Prova","location":"","images":"","tagged_friends":0,"created_at":"2016-08-05 06:59:12","updated_at"
:"2016-08-05 06:59:12","post_type":0,"comments_open":0,"is_blocked":0,"is_share":0,"video":"","book_id"
:0,"author_id":0},{"id":70,"entry_by":"5","post":"Prova","location":"","images":"","tagged_friends":0
,"created_at":"2016-08-05 06:59:08","updated_at":"2016-08-05 06:59:08","post_type":0,"comments_open"
:0,"is_blocked":0,"is_share":0,"video":"","book_id":0,"author_id":0},{"id":69,"entry_by":"5","post":"Prova"
,"location":"","images":"","tagged_friends":0,"created_at":"2016-08-05 06:59:04","updated_at":"2016-08-05
 06:59:04","post_type":0,"comments_open":0,"is_blocked":0,"is_share":0,"video":"","book_id":0,"author_id"
:0},{"id":68,"entry_by":"5","post":"Prova","location":"","images":"","tagged_friends":0,"created_at"
:"2016-08-05 06:58:58","updated_at":"2016-08-05 06:58:58","post_type":0,"comments_open":0,"is_blocked"
:0,"is_share":0,"video":"","book_id":0,"author_id":0},{"id":67,"entry_by":"5","post":"Prova","location"
:"","images":"","tagged_friends":0,"created_at":"2016-08-05 06:58:51","updated_at":"2016-08-05 06:58
:51","post_type":0,"comments_open":0,"is_blocked":0,"is_share":0,"video":"","book_id":0,"author_id":0
},{"id":66,"entry_by":"5","post":"Prova","location":"","images":"","tagged_friends":0,"created_at":"2016-08-05
 06:56:58","updated_at":"2016-08-05 06:56:58","post_type":0,"comments_open":0,"is_blocked":0,"is_share"
:0,"video":"","book_id":0,"author_id":0},{"id":65,"entry_by":"5","post":"Prova","location":"","images"
:"","tagged_friends":0,"created_at":"2016-08-05 06:56:52","updated_at":"2016-08-05 06:56:52","post_type"
:0,"comments_open":0,"is_blocked":0,"is_share":0,"video":"","book_id":0,"author_id":0},{"id":64,"entry_by"
:"5","post":"MInkia","location":"","images":"","tagged_friends":0,"created_at":"2016-08-05 06:41:59"
,"updated_at":"2016-08-05 06:41:59","post_type":0,"comments_open":0,"is_blocked":0,"is_share":0,"video"
:"","book_id":0,"author_id":0},{"id":63,"entry_by":"5","post":"MInkia","location":"","images":"","tagged_friends"
:0,"created_at":"2016-08-05 06:41:51","updated_at":"2016-08-05 06:41:51","post_type":0,"comments_open"
:0,"is_blocked":0,"is_share":0,"video":"","book_id":0,"author_id":0},{"id":74,"entry_by":"5","post":"Prova"
,"location":"","images":"","tagged_friends":0,"created_at":"2016-08-05 07:17:32","updated_at":"2016-08-05
 07:17:32","post_type":0,"comments_open":0,"is_blocked":0,"is_share":0,"video":"","book_id":0,"author_id"
:0},{"id":75,"entry_by":"5","post":"Prova","location":"","images":"","tagged_friends":0,"created_at"
:"2016-08-05 07:18:28","updated_at":"2016-08-05 07:18:28","post_type":0,"comments_open":0,"is_blocked"
:0,"is_share":0,"video":"","book_id":0,"author_id":0}]]

我想创建一个显示此结果的实时Feed砌体,但在AJAX中我只获取第一个结果。这是Ajax(目前没有来自Json的输出我只需要获得div附加的foreach结果)

<script type="text/javascript">
$(document).ready(function(){
    $.ajax({
      url:"getposts",
      type: "get",  
      data: "{}",
      success: function(data){
        var res = data;
        $.each(res, function(index, value) {
            $('#prova').append($('<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>Prova</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/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/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/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>'));
        });
    }
});

2 个答案:

答案 0 :(得分:0)

这个JSON是数组中的13个数组。所以试试:

$.each(res[0], function(index, value) {...});

或您的结果是一些数组:

$.each(res, function(index, value) {
    $.each(value, function(index2, value2) {...});
});

我希望我帮助你

答案 1 :(得分:0)

首先需要展平数组,因为它是一个由13个对象组成的数组。

这可以通过连接内部数组中的所有元素来完成。

spread operator将调用它所调用的数组中的每个元素并创建它的参数。 call(... [1,2])与call(1,2)相同。对结果执行此操作将删除外部数组。

然后使用concat将允许您获取一个数组,以便能够调用forEach来遍历所有json值并创建html以插入到DOM中。

[].concat(...res).forEach(function(values) {
   $('#prova').append(generateHtml(values));
});

或者不那么普遍:

res[0].forEach(function(values){
   $('#prova').append(generateHtml(values));
});