Filter WP user acf field by ajax

Question

I have a search page where search result of user is displaying by postal code or county name. while on the search page i have checkbox to filter user by attribute like developer, designer, and account, so visitor can filter the user of the postal code by attribute. All the field was create by advance custom field. I am displaying the user data by ajax. but don't know where is the problem. please help

here is the form to display checkbox field.

        <div class="sectionContent filter_list">
            <?php 
                acf_form([
                    'field_groups' => ['50'],
                    'fields' => ['category', 
                                'type_of_session', 
                                'wheelchair_access', 
                                'telephone_life_coaching', 
                                'face_to_face_life_coaching',
                                'home_visits',
                                'sign_language',
                            ],
                    'form' => false
                ])
            ?>
        </div> 

    <script>
    jQuery(function($){
        $('.filter_list input').on('change', function()
        {
            var url = '<?php echo admin_url( 'admin-ajax.php' ); ?>?action=find_coach';
            $('.filter_list input').each(function()
            {
                var thisVal, metaKey;

                                if($(this).prop('checked') == true)
                                {
                                    thisVal = $(this).val();
                                    //may be the problem in metakey
                                    metaKey = getParamFromUrl('pin_code');
                                    url += '&acf['+metaKey+'][]='+thisVal;
                                }


            });

            $.get(url, function(res){
                $.each(res, function(key, val){
                    $user_row = '<div data-template="member" class="member">\
                        <div class="user">\
                            <div class="article_left">\
                                <a href="'+val.user_url+'"><img src="'+val.avatar+'"></a>\
                            </div>\
                            <div class="article_right">\
                                <div class="profile-display-address">\
                                    <h2 class="member-name">\
                                        <a href="'+val.user_url+'">'+val.display_name+'</a>\
                                    </h2>\
                                    <div class="col-6">'+val.address+'</div>\
                                    <div class="col-6">'+val.address_2+'</div>\
                                    <div class="col-6">'+val.pin_code+'</div>\
                                </div>\
                                <div class="contact-form contact-links"><a href="#">Contact me</a></div>\
                            </div>\
                        <div class="button-profile"><a class="button whitebg" href="'+val.user_url+'">View profile</a></div>\
                    </div>';
                    document.getElementById('member_list').innerHTML = $user_row;
                });
            });
        }); 

        $('.filter_list input').each(function(){
            //checkbox handling
            if($(this).prop('tagName') == 'INPUT' && $(this).attr('type') == 'checkbox'){
                var val = getParamFromUrl($(this).attr('name'))
                if(val.indexOf($(this).val()) > -1){
                    $(this).prop('checked', true);
                }
            }
        });     
    });

    function getParamFromUrl(name){
        var url = new URL(window.location.href);
        var c = url.searchParams.getAll(name);
        return c;
    }
</script>

    add_action('wp_ajax_search_coach', 'searchLifeCoach');
     add_action('wp_ajax_nopriv_search_coach', 'searchLifeCoach');
     function searchLifeCoach(){
     //print_R($_GET);
     $metaData = [];

     $fields = acf_get_fields($field_group_key);
    if(isset($_GET['acf']) && !empty($_GET['acf'])){
        foreach($_GET['acf'] as $key => $field){
            $metaData[] = [
                'key'   => $key,
                'value' => $field,
                'compare' => is_array($field) ? 'LIKE' : '=' 
            ];
        }
    }

    $args = array (
        'order'      => 'ASC',
        'orderby'    => 'display_name', 
        'role__not_in' => 'administrator',
        //'fields' => 'all_with_meta', 
        'meta_query' => array(
            'relation' => 'OR',
            array(
                'key'     => 'pincode',
                'value'   => sanitize_text_field($_GET['city']),
                'compare' => '='
            ),
            array(
                'key'     => 'city',
                'value'   => sanitize_text_field($_GET['city']),
                'compare' => '='
            ),
        ),
        'meta_query' => array(
            'relation' => 'AND',
            $metaData
        )
    );

    // Create the WP_User_Query object
    $wp_user_query = new WP_User_Query( $args );
    //echo '<pre>'; print_r($wp_user_query); echo '</pre>';
    // Get the results
    $authors = $wp_user_query->get_results();

    foreach($authors as $author){
        $userMeta = get_user_meta($author->data->ID);
        //echo '<pre>'; print_r($userMeta); echo '</pre>';
        $userList[] = [
            'uid' => $author->data->ID,
            'display_name' => $author->data->display_name,
            'email' => $author->data->user_email,
            'user_url' => $author->data->user_url,
            'avatar' => (isset($userMeta['avatar']) ? wp_get_attachment_url($userMeta['avatar'][0]) : ''),
            'first_name' => (isset($userMeta['first_name']) ? $userMeta['first_name'][0] : ''),
            'last_name' => (isset($userMeta['last_name']) ? $userMeta['last_name'][0] : ''),
            'user_phone' => (isset($userMeta['phone']) ? $userMeta['phone'][0] : ''),
            'address' => (isset($userMeta['address']) ? $userMeta['address'][0] : ''),
            'address_2' => (isset($userMeta['address_2']) ? $userMeta['address_2'][0] : ''),
            'pin_code' => (isset($userMeta['pin_code']) ? $userMeta['pin_code'][0] : ''),
            'age' => (isset($userMeta['age']) ? $userMeta['age'][0] : ''),
            'bio' => (isset($userMeta['coach_bio']) ? $userMeta['coach_bio'][0] : ''),
            'city' => (isset($userMeta['city']) ? $userMeta['city'][0] : ''),
            'city_2' => (isset($userMeta['city_2']) ? $userMeta['city_2'][0] : ''),
            'zip_code_2' => (isset($userMeta['zip_code_2']) ? $userMeta['zip_code_2'][0] : ''),
            'zip_code_2' => (isset($userMeta['zip_code_2']) ? $userMeta['zip_code_2'][0] : ''),
        ];
    }
    return wp_send_json($userList);
    exit();
}

Answer 1

The problem is your action names don't match

In your frontend code:

?action=find_coach';

But in your backend code:

    add_action('wp_ajax_search_coach', 'searchLifeCoach');
     add_action('wp_ajax_nopriv_search_coach', 'searchLifeCoach');

search_coach != find_coach, they have to match.

Note that if this code used the REST API, it would have given a 404 and stated the problem in human readable language, e.g.

{
    "code":"rest_no_route",
    "message":"No route was found matching the URL and request method",
    "data":{"status":404}
}