如何循環所有json數據並插入到我的HTML中？

我想插入Json數據到我的file.php。所以他們的每一組都插入到一組div中。（具有相同的風格等）如何循環所有json數據並插入到我的HTML中？

我有一種感覺，我使用的方式不聰明......更好的解決方案是非常受歡迎的。多謝你們。

$.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); 
    } 
});

來源

2015-07-11 Yan

成功函數裏''json''的輸出是什麼？並且使用像#description一樣的DOM元素將覆蓋prev值。所以即使你獲得了很多記錄，也只會顯示最後一條記錄。 –

hi @SameerK感謝您的快速響應。你完全正確，結果只顯示最後一個。 Json的輸出是很多數據，鍵數從0到14，每個數據都有時間，網址等。 – Yan

向你展示json響應。爲了顯示所有的記錄，你需要在循環內部建立一部分html，然後使用容器的ID追加到主html中的某個容器。 –

您可以用流暢的方式編寫代碼。不可數日期打印在你的循環中。如果我知道你的數據格式，我會給你確切的方式。

試試看看這個代碼。

for (var prop in json.posts.data) { 
     $("#description").html(json.posts.data[prop].message); 
    // other same as 
}

來源

2015-07-11 05:08:10

謝謝你們，我已經想通過這種方式。

$.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);

來源

2015-07-11 05:34:30 Yan

很高興你知道了。只是想知道是否每次都會有14條記錄？ –

嗨@SameerK在未來，我希望它顯示更多，並在一定程度上，它加載更多。但是，目前我與他們幾乎沒有問題。 1.（這是一個Facebook API，我不知道如何有更多的帖子，默認是15. 2.不知道如何加載更多，再次猜測使用AJAX。 – Yan

如何循環所有json數據並插入到我的HTML中？

回答

相關問題