Solution:
You can access the data of your custom post types in a javascript file using Rest API and jQuery.
For example, you want to display the ID of your recipe in a div with the class of “the_id” and the title of the recipe in a div with the class of “the_title”. Moreover I’m assuming your post type has the name of “recipes” and we just want to get one recipe.
$(document).ready(function() {
$.ajax({
url: "http://yoururl.com/wp-json/wp/v2/recipes?per_page=1"
}).then(function(data) {
$('.the_id').append(data[0].id);
$('.the_title').append(data[0].title.rendered);
});
});
You can reduce the number of posts you are getting with the “per_page” parameter.
In data you can now access everything the Rest API gives you, in the example the ID (via data.id) and the title (via data.title.rendered).
This might interest you: https://developer.wordpress.org/rest-api/reference/
Here the fields you can access by default: https://developer.wordpress.org/rest-api/reference/posts/