0

I have a bunch of property posts each which have a status of either of Sold, For Sale or SSTC. I have grabbed the status for each property in my functions.php and passed it over to my AJAX js. Now I want to be able to test what status the current property has so that I can apply a different link to each. I have created an if statement that tried to do this task then console.logs some text to see if it works. But all I get is the first if statements value a bunch of times. I believe it could be to do with it being Asynchronous but I don't really know how to get around this.

here's my code; 

jQuery(function($){
    $('#filters').submit(function(e){
        e.preventDefault();

        var filter = $('#filters');


        $.ajax({
            url: ajax_url,
            data: filter.serializeArray(), // form data
            // type:filter.attr('method'), // POST
            dataType: 'json',
            beforeSend:function(xhr){

            },
            success:function(response){
                $('#response').empty();

                for(var i = 0; i < response.length; i++){
                    var status = response[i].status;

                    if(response[i].status = "Sold"){
                        console.log("Sold");
                    }else if(response[i].status = "For Sale"){
                        console.log("For Sale");
                    }else{
                        console.log("SSTC");
                    }

                    var html =""+
                        "<div class='col-sm-6 col-md-4 col-lg-3 post'>" +
                            "<div class='shadowwrapper2'>" +
                                "<a href='" + response[i].permalink + "'>" +
                                    "<div class='propertywrapper'>" +
                                        "<img class='img-fluid gal_imgs' src='" + response[i].image + "' alt='alt'/>" +
                                        "<span class='second_flash'>" + response[i].second_flash + "</span>" +
                                    "</div>" +
                                    "<div class='propertyinfo'>" +
                                        "<div class='row m-0'>" +
                                            "<div class='col-6 p-0 mt-2'>" + response[i].property_type + "</div>" +
                                            "<div class='col-6 p-0 mt-2'>" + response[i].bedrooms + " bedrooms</div>" +
                                        "</div>" +
                                    "</div>" +
                                    "<div class='streetpricewrapper'>" +
                                        "<p class='streetname'>" + response[i].street + ", " + response[i].town + "</p>" +
                                        "<p class='price'>£" + response[i].price + "</p>" + 
                                    "</div>" +                    
                                "</a>" +
                            "</div>" +
                        "</div>";

                    $('#response').append(html);
                }
            }
        });
    });
});
Reece
  • 2,581
  • 10
  • 42
  • 90
  • it's a bit hard to see the problem without seeing the data from `response`, or at least a relevant extract from it. Can you provide this (as JSON) please? There's nothing obviously wrong with the code from a brief glance. – ADyson Jun 13 '18 at 14:09
  • 1
    Actually, scratch that, there is... `if(response[i].status = "Sold")` is an assignment operator. So it keeps setting the value, not reading it. You'll be meaning `if(response[i].status == "Sold")` to use a comparison operator. Same for the others as well. Just a typo. – ADyson Jun 13 '18 at 14:11

1 Answers1

4

In Javscript you need to use == to evaluate a condition. 

if(response[i].status == "Sold"){

And it's best practice to use triple equals (===) to preserve type.

See this question for details: Which equals operator (== vs ===) should be used in JavaScript comparisons?

barro32
  • 2,559
  • 23
  • 36