在表中显示称为数据的ajax

Question

I have this ajax call that gets a json array from the PHP file. I need to put the data into rows in a table which in #gamesList.

I have the append I just do not know how to go through the returned json array and put them in the append

$("#ALL").click(function(){
        $.ajax({
            url: 'getGames.php',
            type:"POST",
            dataType:'json',
            data:({btn:'ALL' }),
            success:function(data){
                //get returned list of games
                //Loop through games
                //display games in table
                $( "#gamesList").append('<tr><td>name</td><td>M</td><td>(2)Entries</td><td>(5)max people</td><td>($100)Fee</td><td>Prizes</td><td>7:00PM(start)</td></tr>');
            }
        });

    }); //btn click

PHP File it returns the rows

$res = mysqli_query($c,"SELECT * FROM games");
while($row = mysqli_fetch_array($res)) {
    $games[] = $row;
 }
   echo json_encode($games)

Answer 1

Just echo the result with html and not JSON. View below edits and comments

$("#ALL").click(function(){
    $.ajax({
        url: 'getGames.php',
        type:"POST",
        //changed from json to html
        dataType:'html',
        data:({btn:'ALL' }),
        success:function(data){
            //display games table echoed from php file inside div gametable
            $("#gamesList").html(data);
        }
    });

    //stop normal form submission
    return false;

    }); //btn click

For the php file you make a slight change and run it through a loop

$res = mysqli_query($c,"SELECT * FROM games");
while($row = mysqli_fetch_array($res)) {
//$games[] = $row;
}?>
<table>
<?php foreach ($res as $game){?>
<tr>
<td>
<?php echo $game['TABLE_COLUMN_NAME'];?>
<td>
</tr>
<?php } ?>
</table>

each $game is a row in your DB table. This code will echo out a table with all the rows and dump that content of this php file into the gamesList div.

Hope this helps!

-Nick