0

Problem is I can see already the value of my json through firebug but the problem is appending it to my table I try to change my json_encode from echo json_encode(array('red'=>$red, 'blue'=>$blue)); to json_encode($blue); to see if my ajax really works then the json_encode($blue); and I change my toAppend += '<tr><td>'+data.red[i]['warrior_name']+'</td><td>Name</td><td>'+data.blue[i]['warrior_name']+'</td></tr>'; to toAppend += '<tr><td>'+data[i]['warrior_name']+'</td></tr>'; then it displays perfectly in my table, but only the blue array and I want both blue and red array. So I want to know what is wrong or I have missing something?

Here's my PHP code:

   //get blue_team attributes
$blue = array();

$blue_result = $db->dataWarrior($battle_id,$blue_name);

foreach($blue_result as $warrior){
    $blue[] = $warrior;
}

//get red_team attributes
$red = array();

$red_result = $db->dataWarrior($battle_id,$red_name);

foreach($red_result as $warrior){
    $red[] = $warrior;
}

    echo json_encode(array('red'=>$red, 'blue'=>$blue));

Here's my ajax code:

$.ajax({
                url: "battle_review.php",
                type: "post",
                datatype: "json",
                data: { 
                    bname: blue_name,
                    btype: blue_type,
                    rname: red_name,
                    rtype: red_type },
                success: function(data){
                    var toAppend = '';
                    if(typeof data === "object"){
                        for(var i=0;i<data.length;i++){
                            toAppend += '<tbody>';
                            toAppend += '<tr><td>'+data.red[i]['warrior_name']+'</td><td>Name</td><td>'+data.blue[i]['warrior_name']+'</td></tr>';

                            toAppend += '</tbody>';
                        }
                        $("#battledata").append(toAppend);
                    }
                }
            });

1 Answer 1

1

The structure of your output is pretty bad for a proper iteration over it. However, assuming red and blue always have the same element count you can do thi:

$.ajax({
    url: "battle_review.php",
    type: "POST", // uppercase
    dataType: "json", // uppercase T
    data: {
        bname: blue_name,
        btype: blue_type,
        rname: red_name,
        rtype: red_type
    },
    success: function(data) {
        var toAppend = '';
        for(var i = 0; i < data.red.length; i++) {
            toAppend += '<tbody>';
            toAppend += '<tr><td>' + data.red[i].warrior_name. + '</td><td>Name</td><td>' + data.blue[i].warrior_name + '</td></tr>';

            toAppend += '</tbody>';
        }
        $("#battledata").append(toAppend);
    }
});

An array like this would be cleaner:

[{"red": ..., "blue": ...},
 {"red": ..., "blue": ...},
]

Then you could simply iterate over it and access the red and blue properties of the elements:

$.each(data, function(i, row) {
    // row.red
    // row.blue
});
Sign up to request clarification or add additional context in comments.

2 Comments

how do I know if its from my blue or red array?
thanks it works! you said Its pretty bad any suggestions to improve it? if it is ok with you . :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.