WordPress REST API- Get post with JavaScript - working example

       Get post with vanilla JavaScript using WordPress REST API is simple and could be done easily with plain code without using JavaScript libraries and PHP code.

       Building REST API into WordPress has been a revolutionary change for its development. New opportunities have been opened for developers to build WordPress sites and applications using WordPress as back-end for Content Management System and completely splitting it from the front-end.

       Endpoints that are built into WordPress for different data types, allow remote interactions, send requests and get responses from them as JSON (JavaScript Object Notation) files. JSON is an open standard for data transition /transfer/ that is both human-readable and JavaScript workable. That is visible by its name.

       The first themes have been appeared that are built with assistance of React, Vue, AngularJS and others JavaScript libraries.

       We have decided to experience with plain JavaScript code, because it is easier to accept, shorter and quicker.

       As back-end we’ll use WordPress 5.2.2, default theme Twenty Seventeen and built in endpoints. There is no need of any WordPress rest api plugin or PHP code writing.

       We’ll show in the next posts how to extract and visualize from WordPress databases the following basic types of data:

       Let’s begin with our first task- Get post with JavaScript, using WordPress REST API.

       First we need of a sample HTML page with two containers: header class="header-content" and article class="content". We’ll visualize the post header into the first one and its content into the second one. The file single-post.js is included in the end of the page. This file contain pure JavaScript code.

       Now we’ll use Pure vanilla JavaScript and begin to code the pull request for the content of one particular post that has been created by WordPress.

       We’ll declare the following variables into the single-post.js, that include the JavaScript code:

       wpThemeURL – the path to WordPress Backend Theme, that initiate the post. In this case we use Twenty Seventeen;

       singlePostFile – the post identifier ( ID ), which content we’ll pull and visualize.

       The rest of variables contributes to visualize the post.

WordPress REST API request using AJAX

       This is a standard AJAX request with addition of several rows ( window.ActiveXObject ....) that allow it to be executed by older versions of Internet Explorer.

       The exact WP REST API request is done through

https://" + wpThemeURL + "/wp-json/wp/v2/posts/" + singlePostFile + "?_embed

and uses the built in the WordPress kernel endpoint. Assigning values to the variables, the result looks like:

https://earth-for-all.com/twentyseventeen/wp-json/wp/v2/posts/49?_embed

       The returned JSON file is the result of the request:

       Once received the JSON file, function grabsinglePostFile calls the function parsePostResponse, that read the received file from WordPress REST API and desplay it to the screen.

Reading of the JSON file and displaying the post content

       The function parsePostResponse, contain the following code:

       You can see on live this code here and the post shown in WordPress theme Twenty Seventeen here.

       That is the overview. We hope that this working example is simple and clear for all with initial HTML5 and JavaScript knowledge. There is no need of WordPress rest api plugins and JavaScript libraries.

       This code has been used in Elf - WordPress REST API Theme, that is a free starter theme developed under plain JavaScript code.

Have a good time and create useful and beautiful WordPress sites and applications with Elf - WordPress REST API Theme. Good luck!