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