我有这个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>'));
});
}
});
答案 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));
});