Sending PHP Array to jQuery with $.post() and then looping through those values

Question

I'm sending an array to jQuery and then looping through those values and displaying them, but I can get it to work right. Can someone point me in the right direction -

PHP - the only part that matters on it - echo json_encode($tR);

jQuery -

$(document).on('click', '.chooseStat', function(){
    var id = $(this).attr('id');
    $.post('chooseStat.php', {id:id}, function(data){
        console.log(data);
        var open = '';
        for(var i = 0; i < data.length; i++) {
            if (i % 2 == 0) {
                open+="<tr class='alt'>";
                open+="<td>"+data[i]+"</td>";
                open+="<td>"+data[i]+"</td>";
                open+="<td>"+data[i]+"</td>";
                open+="</tr>";
            }
            else {
                open+="<tr>";
                open+="<td>"+data[i]+"</td>";
                open+="<td>"+data[i]+"</td>";
                open+="<td>"+data[i]+"</td>";
                open+="</tr>";
            }
        }
        $('#statDisplayBody').html(open);
    });
});

Heres what the array looks like when it gets sent to the jQuery script - http://prntscr.com/24wa68

Heres what it looks like when I try to display them with the method in the script I have - http://prntscr.com/24wadk

My new jquery -

$(document).on('click', '.chooseStat', function(){
    var id = $(this).attr('id');
    $.post('chooseStat.php', {id:id}, function(data){
        console.log(data);
        var open = '<th>Rank</th><th>Username</th><th>Stat</th>';
        for(var i = 0; i < data.length; i++) {
            if (i % 2 == 0) {
                open+="<tr class='alt'>";
                open+="<td>"+data[i]["rank"]+"</td>";
                open+="<td>"+data[i]["username"]+"</td>";
                open+="<td>"+data[i]["score"]+"</td>";
                open+="</tr>";
            }
            else {
                open+="<tr>";
                open+="<td>"+data[i]["rank"]+"</td>";
                open+="<td>"+data[i]["username"]+"</td>";
                open+="<td>"+data[i]["score"]+"</td>";
                open+="</tr>";
            }
        }
        $('#statDisplayBody').html(open);
    }, "json");
});

And that returns a proper array now, but the way I'm looping through apparently doesn't seem to be working because now this is happening - http://prntscr.com/24wcuz (its only displaying the last row of the array).

Edited my post to show you my new jQuery and new problem :L

George
– George

2013-11-17 23:06:40 +00:00
Commented Nov 17, 2013 at 23:06 — George
– George, Commented Nov 17, 2013 at 23:06

kero · Accepted Answer · 2013-11-17 23:00:26Z

3

You need to properly parse it in JavaScript. This can either be done via data = JSON.parse(data); or since you are already using $.post like the following (see jQuery API, Example 7)

$.post('chooseStat.php', {id:id}, function(data){
    //code
}, "json");

answered Nov 17, 2013 at 23:00

kero

10.7k5 gold badges44 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

George Over a year ago

Ah thanks dude thats perfect, now my array looks like this - prntscr.com/24wc86 But when I try to accesss the values like this - data[i]["rank"] and so on and loop through them just as I'm doing above it only shows the last row for some reason. I'll edit my post to show you my jQuery now.

Collectives™ on Stack Overflow

Sending PHP Array to jQuery with $.post() and then looping through those values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related