** I have added more details, thank you for your assistance so far
I am in the process of implementing an AJAX search functionality on my Wordpress site to filter properties based on type, location, and status.
Being a novice at AJAX, I have been following various tutorials to reach this stage but I'm facing an issue with the final step. Everything seems to be functioning correctly, however, when I try to iterate through my AJAX call using a for loop, it returns as undefined
Below is the snippet from the JavaScript file:
$ = jQuery;
var bedSearch = $("#prop-search");
var searchForm = bedSearch.find("form");
searchForm.submit(function(e){
e.preventDefault();
var data = {
action : "prop_search",
status : bedSearch.find("#status").val(),
location_of_accom : bedSearch.find("#location").val(),
propertytype : bedSearch.find("#property_type").val()
};
$.ajax({
url : ajax_url,
data : data,
success : function(response) {
bedSearch.find("ul").empty();
for(var i = 0; i < response.length ; i++) {
console.log(response[i]);
}
}
});
});
The code for the AJAX callback (in functions.php):
// creating ajax callback
add_action ('wp_ajax_prop_search', 'bed_search_callback');
add_action ('wp_ajax_nopriv_bed_search', 'bed_search_callback');
function bed_search_callback() {
$status1=0;
if(isset($_GET['status'])) $status = $_GET["status"];
$location_of_accom = 0;
if(isset($_GET['location_of_accom'])) $location_of_accom = $_GET["location_of_accom"];
$propertytype = 0;
if(isset($_GET['propertytype'])) $propertytype = $_GET["propertytype"];
$result = array();
$args = array(
"post_type" => "accomodation",
"posts_per_page" => -1
);
$args['meta_query'][] = array (
'key' => 'status',
'value' => $status,
'compare' => "LIKE"
);
$args['meta_query'][] = array (
'key' => 'location_of_accom',
'value' => $location_of_accom,
'compare' => "LIKE"
);
$args['meta_query'][] = array (
'key' => 'propertytype',
'value' => $propertytype,
'compare' => "LIKE"
);
$bed_query = new WP_Query( $args );
while ($bed_query->have_posts() ) {
$bed_query->the_post();
$result[] = array(
"id" => get_the_ID(),
"title" => get_the_title(),
"permalink" => get_the_permalink()
);
}
echo json_encode($result);
wp_die();
}
Here's a reference guide that I've been referring to. It has worked smoothly until the last part where I encounter difficulty in displaying the output as intended:
https://www.youtube.com/watch?v=Ol8aBPmjdmA
Current output screenshot : Screenshot of output