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.

David Mulder · Accepted Answer · 2013-12-22 02:29:48Z

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/

ilias · Accepted Answer · 2013-12-22 02:30:07Z

1

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

answered Dec 22, 2013 at 2:30

ilias

1,3451 gold badge9 silver badges16 bronze badges

2 Comments

David Mulder Over a year ago

Just a fair warning towards readers: mixing html markup and javascript is a bad thing to teach new users.

ilias Over a year ago

@DavidMulder you're right. I'll keep that in mind in the future, thanks for pointing it out.

chamweer · Accepted Answer · 2013-12-22 02:22:38Z

0

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.

answered Dec 22, 2013 at 2:22

chamweer

619 bronze badges

Comments

Rob Alarcon · Accepted Answer · 2013-12-22 02:28:34Z

0

@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);
}

});

answered Dec 22, 2013 at 2:28

Rob Alarcon

1,4502 gold badges18 silver badges32 bronze badges

3 Comments

David Mulder Over a year ago

Just a fair warning towards readers: mixing html markup and javascript is a bad thing to teach new users.

Rob Alarcon Over a year ago

@DavidMulder, you're right, it's actually a good nice to have in stackoverflow, some distinction between an answer and a full-explanation. i.e. this answer solve the user problem, but it don't provide a good insight of how to separate the presentation from the data that is received (SoC, maybe some MV* framework).

David Mulder Over a year ago

Yeah, it's always a hard thing to find the balance between how much you should and should not teach a user. For example, right now I wouldn't throw a full framework at them, but as I don't believe there are /any/ situations which justify html in javascript like that I would prefer not even showing that to new users. But that might be just me :P

Collectives™ on Stack Overflow

looping javascript didn't work

4 Answers 4

Comments

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related