Question

—————————PHP CODE—————————:

    <?php

$wtype = $_POST['wtype'];

$attributes = array();

if($wtype == 'Ninja'){
    $attributes['health'] = '40-60';
    $attributes['attack'] = '60-70';
    $attributes['defense'] = '20-30';
    $attributes['speed'] = '90-100';
    $attributes['evade'] = '0.3-0.5';
}
else if($wtype == 'Samurai'){
    $attributes['health'] = '60-100';
    $attributes['attack'] = '75-80';
    $attributes['defense'] = '35-40';
    $attributes['speed'] = '60-80';
    $attributes['evade'] = '0.3-0.4';
}
else if($wtype == 'Brawler'){
    $attributes['health'] = '90-100';
    $attributes['attack'] = '65-75';
    $attributes['defense'] = '40-50';
    $attributes['speed'] = '40-65';
    $attributes['evade'] = '0.3-0.35';
}

echo json_encode($attributes);

?>

—————————HMTL CODE—————————:

 <div id="warriors">
        <form id="blue_team">
            <p>
                <label class="team">Blue Team</label>
            </p>
            <p>
                <a href="#Naruto"><img class="blue_img" src="resources/naruto.png" title="Ninja" alt="Naruto"></a>
                <a href="#Sasuke"><img class="blue_img" src="resources/sasuke.png" title="Samurai" alt="Sasuke"></a>
                <a href="#Sakura"><img class="blue_img" src="resources/sakura.png" title="Brawler" alt="Sakura"></a>
            </p>
            <p>
                <label>Name:</label>
                    <input id="blue_name" type="text" readonly="readonly">
                <label>Type:</label>
                    <input id="blue_type" type="text" readonly="readonly">
            </p>
        </form>

    <!--Blue Dialog-->
    <div title="Warrior Name - Blue" id="blue_form" class="blue_dialog">
        <form>
            <p>
                <label>Name:</label>
                    <input id="name" type="text">
            </p>
        </form>
        <table>

        <table>
    </div>

—————————JS CODE—————————:

<script>
    $(function() {
        $("button").button();
        $(".blue_img").click(function() {
            var blue_type = $(this).attr("title").trim();
            $.ajax({
                url: "get_attributes.php",
                type: "post",
                datatype: "json",
                data: {wtype: blue_type },
                success: function(data) {
                    var toAppend = '';
                    if(typeof data === "object"){
                        for(var i=0;i<data.length;i++){
                            var attributes = data[i];
                            toAppend += "<tr><td>"+data[i]['health']+"</td></tr>";
                            toAppend += "<tr><td>"+data[i]['attack']+"</td></tr>";
                            toAppend += "<tr><td>"+data[i]['defense']+"</td></tr>";
                            toAppend += "<tr><td>"+data[i]['speed']+"</td></tr>";
                            toAppend += "<tr><td>"+data[i]['evade']+"</td></tr>";
                        }
                        $("#blue_form table").append(toAppend);
                    }
                }
            });
            $("#blue_form #name").val($(this).attr("alt").trim());
            $("#blue_form").dialog({
                    width:250,
                    resizable:false,
                    modal:true,
                    buttons: {
                        "Done": function() {
                            $("#blue_name").val($("#blue_form #name").val().trim());
                            $("#blue_type").val(blue_type);
                            $("#blue_form").hide(400);
                            $(this).dialog("close");
                        }
                    }
            });
        });
    });
</script>

Please I am expecting an table of data output to #blue_form but I didn’t get any. But my other functions works well. But when I see the javascript console it identifies the method post

Answer 1

From your code I’m not sure why you need a loop, you could just do something like

success: function(data) {
    var toAppend = '';
    if(typeof data === "object") {
        toAppend += "<tr><td>"+data['health']+"</td></tr>";
        toAppend += "<tr><td>"+data['attack']+"</td></tr>";
        toAppend += "<tr><td>"+data['defense']+"</td></tr>";
        toAppend += "<tr><td>"+data['speed']+"</td></tr>";
        toAppend += "<tr><td>"+data['evade']+"</td></tr>";
        $("#blue_form table").append(toAppend);
    }
}