jQuery if/else statements

Question

i'm trying to write some if/else conditions within a jQuery ajax method. I don't know jQuery well, so i'm probably just making a stupid small syntax error. But here it is:

    function swapContent(count,product)
        {
            $.ajax(
            {
                type: "POST",
                dataType: 'json',
                url: "includes/price-update.php",
                data: {countVar: count, ProductID: product},
                success: function(data)
                {
                    console.log(data);
                    $('.cleardata').remove();

                    $.each(data, function ()
                    {

                        $(".price-data").append(
                        $("<tr class='cleardata'/>")

                        if (data.InStock == "In Stock") {
                        $('.in-stock-row').text ('Yes');
                        }
                        else if (data.InStock == "Unavaiable"){
                             $('.in-stock-row').text ('No');
                        }
                        else{
                             $('.in-stock-row').text ('-');
                        }
                        .append("<td class='store-row'><h5 property='seller'>" + this.MerchantName + "</h5></td>")
                        .append("<td class='price-row'><h5 property='price'>$" + this.Price + "</h5></td>")
                        .append("<td class='in-stock-row'><h5>" + this.InStock + "</h5></td>")
                        .append("<td class='merch-row'><a property='url' target='_blank' href='" + this.PageURL + "' class='merch-but'>GET IT</a></td>")
                        );
                    })
                }
            });
        }
    </script>

Everything works great aside from the if/else statments. I'm not sure if return is the correct way of echoing out data. I am a PHP guy, so the jQuery is still all new. Thanks for any help.

EDIT: I just changed the code according to some suggestions and this is what I have, and nothing in my table is showing up now.

Second EDIT: Attaching an image of JSON data for debugging.

Third EDIT: Posting PHP data

<?php
$countVar = $_POST['countVar'];
$ProductID = $_POST['ProductID'];
$data = PriceCompare($countVar, $ProductID);
echo json_encode($data);

function PriceCompare($countVar, $ProductID){
$DBH = new PDO('mysql:host=localhost;dbname=---','---','---');
$STH = $DBH->query('SELECT MerchantName, Price, PageURL, InStock
                    FROM merchants
                    WHERE ProductID=' . $ProductID .' AND Count=' . $countVar . '
                    ORDER BY Price');

$result = $STH->fetchAll();

return $result;
}
?>

EDIT Four: Fixed the JSON data from getting two sets of the data by changing the php fetchall method to fetchall(PDO::FETCH_ASSOC) Results of fixed JSON data below. Still not getting the correct results in the In Stock table field though.

Answer 1

I have added some mock JSON, there was a typo in the spelling of Unavailable in the first one. This is only the each section of the AJAX success function which is correct. You can see this working on http://jsfiddle.net/mhWdP/

Hope that helps. R.

JsonData = [{
    "InStock": "In Stock",
        "MerchantName": "Coffee for Less",
        "PageURL": "http://www.google.com",
        "Price": "14.99"
}, {
    "InStock": "Unavailable",
        "MerchantName": "Drugstore",
        "PageURL": "http://www.google.com",
        "Price": "15.99"
}, {
    "InStock": "No",
        "MerchantName": "Drugstore2",
        "PageURL": "http://www.google.com",
        "Price": "29.99"
}];


$.each(JsonData, function (index, dataItem) {
    stockStatus = '';
    if (dataItem.InStock == "In Stock") {
        stockStatus = "Yes";
    } else if (dataItem.InStock == "Unavailable") {
        stockStatus = "No";
    } else {
        stockStatus = "-";
    }

    tempRow = document.createElement('tr');

    $(tempRow).append("<td class='store-row'><h5 property='seller'>" + dataItem.MerchantName + "</h5></td>")
        .append("<td class='price-row'><h5 property='price'>$" + dataItem.Price + "</h5></td>")
        .append("<td class='in-stock-row'><h5>" + stockStatus + "</h5></td>")
        .append("<td class='merch-row'><a property='url' target='_blank' href='" + dataItem.PageURL + "' class='merch-but'>GET IT</a></td>")
        .append("</tr>");

    $(".price-data").append(tempRow);
});

Answer 2

At least two problems:

1. You are returning before you do the $(".price-data").append part
2. You are acting on data (the list), not any particular element of the list.

It should be something like:

                $.each(data, function(i, element)
                {
                    if (element.InStock == "In Stock") {