How retrieve json with array on an array on it?

Question

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

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

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