0

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?

1 Answer 1

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.

2
  • So the acf javascript api cannot read a custom post type and return a custom field? All my code is in javascript so would prefer a solution? How can I load the javascript acf api manually though? Aug 2, 2023 at 10:06
  • The ACF JavaScript can read a custom post and return the custom field, but cannot return the post by custom field directly. For this you need RestAPI. You can call this API from javascript using fetch() and get the data you want.
    – Joy
    Aug 2, 2023 at 11:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.