looping javascript didn't work

Question

I'm trying to get data from app engine datastore using javascript and json. it's also allowed jsonp service, here the javascript code:

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

you can also check it here: http://jsfiddle.net/YYTkK/7/

unfortunately, it just retrieve 1 latest data from the datastore. am I doing something wrong with this code? thanks in advance.

Answer 1

You're not appending elements, but simply changing the value of the same 3 elements in question three times. So you simply overwrite the value you put into it the time before. The easiest way to solve this is to designate the existing tr as a .template and clone it in your loop, make the necessary changes (filling in the values) and then appending it.

Fixing some other unclear things this gives the following

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

See functional demo: http://jsfiddle.net/YYTkK/13/

Answer 2

You must append a new row in the table in every loop. Here's the working fiddle. 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);
    }
});

Answer 3

what you have to do is create dynamic "tr" s and append to tbody and use thead for header and separate the body using tbody and create tr s on each iteration and after the loop append that tr to tbody. that will do the job, as you do now it will override the values at each iteration.

Answer 4

@chamweer answer is correct you have to create a new tr with td's dynamically

like this:

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

Because you're overriding the same td's over and over again.

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

});