Get Post using ECMAScript - WP REST API

       Get Post using ECMAScript is easy and can be accomplished through several lines of code. This is because ECMAScript and more precisely ES6 provides new features that we can use.

        One of the previous posts showed how to fetch the content of a post using the WordPress REST API using traditional Vanilla JavaScript code. We will now do this using the new features of ECMAScript (ES6).

Get Post using ECMAScript, AJAX request and WordPress REST API

        ECMAScript supports the execution of asynchronous requests based on promises and callbacks.

       Once the promise is called, it begins to wait. This means that the calling function continues execution while waiting for the promise to do its own processing and return callbacks. The calling function waits for the promise to return a completed signal, or termination of execution, but since JavaScript (ES6) works asynchronously, the function continues its execution while the promise also works. This is how asynchronous functions in ECMAScript work in general.

       Promises are used by many standard and modern web APIs, but we will use the Fetch API.

       The Fetch API allows us to execute HTTP requests to the server (in our case the WordPress back-end theme). For each request, a Promise is created that must be fulfilled to determine the type of content and to gain access to the data.

       We will now develop a working example that will Get a Post using ECMAScript and the WordPress REST API. As back-end we’ll use WordPress 5.2.3, theme Twenty Seventeen and built in endpoints. There is no need of any WordPress rest api plugin or PHP code writing.

       We will use the built-in WordPress endpoint through the following query:

GET /wp-json/wp/v2/posts/<id>?_embed

where <id> means post identifier ( ID ). In our case it will look like this:

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

       We'll create a sample HTML page with two containers: header class="header-content" and article class="content" and display the post title into the first one and post content into the second one. The file single-post-ECMA.js is included in the end of the HTML page. This file contain necessary ES6 code.

       Now we'll use ECMAScript code, that we'll put into single-post-ECMA.js file.

       The standard fetch () GET request format is simple:

       The fetch() promise will resolve even if you get a failing status code, such as a 404 response. In other words, you can’t rely on a catch() method on the promise to handle failed requests.

Using Fetch API to get a post with WordPress REST API

       The response does include a field called ok that’s set to true if the response code is in the 200–299 range. You can check for that response and throw an error if there’s a problem.

       Unfortunately, Internet Explorer doesn’t include ok , but Edge does. If you need to support older versions of Internet Explorer, you can check response.status to see if the value is between 200 and 299.

       Now we can adapt this JavaScript code to our needs and create a really working example:

       You can see the live demo of this really working example here and the same information from the backend theme Twenty Seventeen here.

       We hope that this working example is simple and clear for all with initial JavaScript knowledge. There is no need of WordPress plugins, JavaScript libraries or PHP code.

       The example above is included in the new version of Elf - WordPress REST API Starter Theme, which is being developed using ECMAScript. The working version of the theme, created through plain Vanilla JavaScript code without the use of JavaScript libraries, can be viewed live and downloaded free here:

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