Ajax 成功后循环

Question

我有这个 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}]]

我想创建一个显示此结果的实时提要砌体，但在 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>'));
        });
    }
});

Answer 1

这个JSON是一个数组中的13个数组。所以尝试：

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

或者你的结果是一些数组：

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

希望能帮到你

Answer 2

您首先需要展平数组，因为它是一个包含 13 个对象的数组。

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

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

使用 concat will then allow you to get an array to be able to call forEach 遍历所有 json 值并创建 html 以插入到 DOM.

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

一般情况下：

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

Ajax 成功后循环

Ajax loop after success

ajax

jquery

json

laravel-5.1