循環javascript沒有工作

Question

我想從應用程序引擎數據存儲使用JavaScript和JSON數據。它也允許JSONP服務，這裏的javascript代碼：

$.getJSON("http://1.handy-post-402.appspot.com/show?callback=?", function(json) { 
for (var i = 0; i < json.length; i++) { 
    var map  = json[i].propertyMap; 
    var content = map.isi; 
    var user = map.No_HP; 
    var date = map.tanggal; 

    $('#date').text(date); 
    $('#nohp').text(user); 
    $('#content').text(content); 
} 
}); 

您也可以點擊此處查看：http://jsfiddle.net/YYTkK/7/

不幸的是，它只是檢索數據存儲1個最新數據。我在做這個代碼錯了嗎？ 在此先感謝。

Answer 1

您不是追加元素，而是簡單地更改三次相同的三個元素的值。所以你只是簡單的覆蓋你之前的時間。解決此問題的最簡單方法是將現有的tr指定爲.template並將其克隆到您的循環中，進行必要的更改（填充值）並添加它。

修復一些其他的事情不清楚這提供了以下

$.getJSON("http://1.handy-post-402.appspot.com/show?callback=?", function(records) { 
    for (var i = 0; i < records.length; i++) { 
     //Clone the row/unit which we will be using for each record (the class should refer to the type of item it /actually/ is) 
     row = $(".row.template").clone(); 
     //The template class is hidden, so remove the class from the row/unit 
     row.removeClass("template"); 

     var map  = records[i].propertyMap; 
     var content = map.isi; 
     var user = map.No_HP; 
     var date = map.tanggal; 

     //Make the required changes (find looks for the element inside var row) 
     row.find('.date').text(date); 
     row.find('.nohp').text(user); 
     row.find('.content').text(content); 

     //Append it to the parent element which contains the rows/units 
     $("tbody").append(row); 
    } 
}); 

見功能演示：http://jsfiddle.net/YYTkK/13/

Answer 2

你所要做的就是創建動態「tr」並追加到tbody中，並使用head作爲標題，並使用tbody分開正文，並在每次迭代中創建tr s，並在循環後面附加tr到tbody。那將會完成這項工作，就像你現在所做的那樣，它將在每次迭代中重寫值。

Answer 3

@chamweer答案是正確的，你必須創建與TD的動態

這樣的新潮流：

http://jsfiddle.net/YYTkK/14/

因爲你替換同TD的一遍又一遍。

$.getJSON("http://1.handy-post-402.appspot.com/show?callback=?", function(json) { 

    for (var i = 0; i < json.length; i++) { 
     var map  = json[i].propertyMap; 
     var content = map.isi; 
     var user = map.No_HP; 
     var date = map.tanggal; 

     // create a temporary tr 
     var tr = $("<tr />"); 

     // append to the tr the td's with their values 
     tr.append($("<td />").text(date), $("<td />").text(user), 
      $('<td />').text(content)); 

     // finally append the new tr to the table's tbody 
     $("#js-tbody").append(tr); 
} 

}）;

Answer 4

你必須在每個循環追加一個新行的表。這是工作小提琴。 fiddle

$.getJSON("http://1.handy-post-402.appspot.com/show?callback=?", function(json) { 
    for (var i = 0; i < json.length; i++) { 
     var map  = json[i].propertyMap; 
     var content = map.isi; 
     var user = map.No_HP; 
     var date = map.tanggal; 


     var row = '<tr><td>'+date+'</td><td>'+user+'</td><td>'+content+'</td></tr>'; 
     $('#valuetable').append(row); 
    } 
});