Get Posts using ECMAScript and WordPress REST API

       Get Posts 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 recent posts using the WordPress REST API and Vanilla JavaScript code. We will now do this using the new features of ECMAScript (ES6).

       We will now develop a working example that will Get posts 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.

Get Posts using WordPress REST API

       We'll create a sample HTML page with one container: section class="content" and display the posts content into it. The file posts-ECMA.js is included in the end of the HTML page. This file contain necessary ES6 code.

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

GET /wp-json/wp/v2/posts

The recent 10 posts will be returned. If we want to show only 3 of them we will have to use per_page = 3 as follows:

GET /wp-json/wp/v2/posts?per_page=3

In our case it will look like this:

https://earth-for-all.com/twentyseventeen/wp-json/wp/v2/posts?per_page=3

       The result from request – the JSON file will include the contents of the last three posts:

       This is a plain JSON file, that could be easily read and displayed by few rows of vanilla JavaScript code.

Using ECMAScript Fetch API and WordPress REST API to get posts

        ECMAScript supports the execution of asynchronous requests based on promises and callbacks. 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 (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 explained how the Fetch API works in one of the previous posts Get Post using ECMAScript - WP REST API.

       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.

       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.

       The so-called "browser" 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. We'll use ECMAScript code, that we'll put into posts-ECMA.js file:

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

       Fetch API provides a more powerful and flexible feature set, but browsers have started to add experimental support for it soon. This limits its current usage and should be taken into account when developing websites and applications. Which browsers support Fetch APIs and to what extent you can view the MDN web docs.

       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 beautiful WordPress sites and applications with Elf - WP REST API Theme. Good luck!