How can I loop all json data and insert into my HTML? - php

Question

I'd like to insert the Json data into my file.php. And so each group of them are insert into group of divs. (with the same style etc.)
I have a feeling the way I am using is not smart... better solutions are very welcome. Thanks guys.
$.ajax({
url: feedURL,
jsonpCallback: 'jsonpCallback',
contentType:"application/json",
dataType: 'jsonp',
success: function(json) {
for (var i=0; i < 15; i++) {
var date = new Date(json.posts.data[i].created_time);
var months = ["/01/", "/02/", "/03/", "/04/", "/05/", "/06/", "/07/",
"/08/", "/09/", "/10/", "/11/", "/12/"];
$("#description").html(json.posts.data[i].message);
$("#caption").html(json.posts.data[i].caption);
$("#expire_date").html(date.getDate() + months[date.getMonth()] + date.getFullYear());
$("#fb_link").html(
'<a href="' + json.posts.data[i].link + '">'
+ 'Total Like: ' + json.posts.data[i].likes.summary.total_count
+ ' Total Share: ' + json.posts.data[i].shares.count
+ ' View on Facebook' + '</a>'
);
$("#profile_img").html('<img src="' + json.picture.data.url + '">');
$("#profile_name").html(json.name);
$("#full_fb_photo").html('<img src="' + json.posts.data[i].full_picture + '">');
}
},
error: function(e) {
console.log(e.message);
}
});

Answer 1

You can write your code in flowing way. Uncountable date print in your loop. If I know your data format, I will give you exact way.
Try this code.
for (var prop in json.posts.data) {
$("#description").html(json.posts.data[prop].message);
// other same as
}

Answer 2

Thanks guys, i have figured out in this way.
$.ajax({
url: feedURL,
jsonpCallback: 'jsonpCallback',
contentType:"application/json",
dataType: 'jsonp',
success: function(json) {
var social_list = "";
for (i=0; i < 15; i++) {
var date = new Date(json.posts.data[i].created_time);
var months = ["/01/", "/02/", "/03/", "/04/", "/05/", "/06/", "/07/",
"/08/", "/09/", "/10/", "/11/", "/12/"];
social_list += "<div class='social_item'><div class='item'><div class='heading'>";
social_list += "<img src='" + json.picture.data.url + "'/><span>" + json.name + "</span><i class='fa fa-facebook'></i></div>";
social_list += "<div class='content'><p>Created on" + date.getDate() + months[date.getMonth()] + date.getFullYear() + "</p>";
social_list += "<div><img src='" + json.posts.data[i].full_picture + "' /></div>";
social_list += "<p name=" + i + ">" + json.posts.data[i].message + "</p>";
social_list += "<div><a href='" + json.posts.data[i].link + "'> Total Likes: " + json.posts.data[i].likes.summary.total_count + "Total Share: " + json.posts.data[i].shares.count + " View on Facebook </a></div>";
social_list += "</div></div></div>"
}
$('#social_list').html(social_list);