Advanced Custom Fields (ACF) and their Javascript API

Question

I have some jquery javascript in the frontend that is helping me display a map. I want to query my custom post type "mountains" basis an "id" of, say, 106. I can do this ok with PHP as follows;

$osm_geometry =  get_query_var('osm_geometry'); // get from url or just feed in manually.
$args = array(
    'numberposts'   => -1,
    'post_type'     => 'mountains',
    'meta_key'      => 'osm_geometry',
    'meta_value'    => $osm_geometry
);

$the_query = new WP_Query( $args ); 

Maybe the below is the same as above in acf javascriupt api?

// available args
var args = {
    key: '',                    // The field key (field_123)
    name: '',                   // The field name (my_field)
    type: '',                   // The field type (image, text)
    is: '',                     // jQuery selector (:visible)
    parent: false,              // jQuery element to search within
    sibling: false,             // jQuery element to search alongside
    limit: false,               // limit the number of jQuery elements returned
};

// example
var $fields = acf.findFields({
    type: 'image'
});

I would like to use above on a non-acf form in the front end. I understand that acf is loaded automatically for acf forms etc but the custom.js I am using isn't acf. I would like to stick with ACF javascript api as I assume it has a lot of the database logic with POSTS already worked out.

How can I load acf's javascript api manually please?

Answer 1

You are trying to fetch a custom post - you cannot do that with ACF javascript API directly. ACF js api is to get acf fields for a post.

What you need is the wp-rest-api with restAPI enabled for the ACF field that you want to query by - in your case it is 'osm_geometry'.

Check out these examples here: https://www.advancedcustomfields.com/resources/wp-rest-api-integration/

---

If you are not so keen about using ACF's rest API, you can register a simple restAPI yourself and write the working PHP code there and then call your restAPI from javascript.

Here's how :

function custom_get_post_data( $request ) {
    $osm_geometry = $request->get_param( 'osm_geometry' );

    $args = array(
        'numberposts'   => -1,
        'post_type'     => 'mountains',
        'meta_key'      => 'osm_geometry',
        'meta_value'    => $osm_geometry
    );

    $the_query = new WP_Query( $args ); 
    
    // Do more logics here... and create your final data
    
    $final_data = '';

    // Return the data as a JSON response
    return new WP_REST_Response( $final_data );
}

function custom_restapi_for_acf_field() {
    register_rest_route( 'custom/v1', '/post-meta/(?P<osm_geometry>\d+)', array(
        'methods'  => 'GET', //or POST
        'callback' => 'custom_get_post_data',
    ) );
}

add_action( 'rest_api_init', 'custom_restapi_for_acf_field' );

You can add more fields in the restAPI as you want.