looping javascript не работал

Question

Я пытаюсь получить данные из хранилища данных приложения, используя javascript и json. это также позволило JSONP службы, здесь яваскрипту кода:

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

Вы не добавляете элементы, а просто изменяете значение тех же 3 элементов, о которых идет речь три раза. Поэтому вы просто перезаписываете значение, которое вы вложили в него раньше. Самый простой способ решить это - обозначить существующий 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» s и приложить к tbody и использовать thead для заголовка и разделить тело с помощью tbody и создать tr s на каждой итерации, а после цикла добавить это tr to tbody. который выполнит эту работу, так как теперь вы будете переопределять значения на каждой итерации.

Answer 3

@chamweer ответ правильный, вы должны создать новый тр с тд динамически

как это:

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

Поскольку вы перекрывая тот же ТД снова и снова.

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