Javascript Wordpress REST API V2 Example to Fetch All Blog Posts,Links & Date inside HTML5 Table

Welcome folks today in this blog post we will be using the wordpress rest api v2 to fetch all blog posts links and date and display it inside the html5 table. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wordpress REST API V3 Example in Javascript</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1 class="text-center">
            WordPress List of All Blog Posts
        </h1>
        <form id="form">
            <div class="form-group container">
            <label for="url">Website URL:</label>
            <input type="text" class="form-control" name="" id="url" placeholder="Enter WordPress Website URL" required>
            </div>
            <div class="form-group container">
                <label for="number">Number of Blog Posts:</label>
                <input type="number" class="form-control" value="20" id="number" required>
            </div>
            <div class="form-group container">
                <button class="btn btn-danger btn-block">
                    Get Blog Posts
                </button>
            </div>
        </form>
        <div id="result">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Post Title</th>
                        <th>Published Date</th>
                    </tr>
                </thead>
                <tbody id="data">

                </tbody>
            </table>
        </div>
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</html>

<!DOCTYPE html>

<head>

<title>Wordpress REST API V3 Example in Javascript</title>

</head>

<body>

WordPress List of All Blog Posts

</h1>

<label for="url">Website URL:</label>

</div>

<label for="number">Number of Blog Posts:</label>

</div>

Get Blog Posts

</button>

</div>

</form>

<thead>

<tr>

<th>Post Title</th>

<th>Published Date</th>

</tr>

</thead>

</tbody>

</table>

</div>

</body>

</html>

As you can see we are including the bootstrap and jquery cdn and also in the html we have a simple input field where we allow the user to submit the website url and also an input field to enter how many number of posts to fetch and then we have the button to fetch blog posts. And then we have the simple table to display all blog posts where we will be displaying the post title and post date.

And now we need to write the javascript code to call the wordpress rest api and display these posts inside the table as shown below

index.js

$("#form").submit((e) => {
        e.preventDefault()

        var url = $("#url").val()

        var number = $("#number").val()

        getBlogPosts(url,number)
    })

    $("#number").change((e) => {
        number = $(this).val()
    })

    function getBlogPosts(url,number){
        $("#data").html('')
        $.ajax({
            method:"GET",
            url:`https://${url}/wp-json/wp/v2/posts?_fields[]=title&_fields[]=link&_fields[]=date&per_page=${number}`,
            success:function(data){
                console.log(data)

                data.forEach(post => {
                    $("#data").append(`
                    
                    <tr>
                        <td><a href="${post.link}" target="_blank">${post.title.rendered}</a></td>
                        <td>${post.date}</td>
                        </tr>
                    
                    `)
                });
            }
        })
    }

$("#form").submit((e) => {

e.preventDefault()

var url = $("#url").val()

var number = $("#number").val()

getBlogPosts(url,number)

})

$("#number").change((e) => {

number = $(this).val()

})

function getBlogPosts(url,number){

$("#data").html('')

$.ajax({

method:"GET",

url:`https://${url}/wp-json/wp/v2/posts?_fields[]=title&_fields[]=link&_fields[]=date&per_page=${number}`,

success:function(data){

console.log(data)

data.forEach(post => {

$("#data").append(`

<tr>

<td><a href="${post.link}" target="_blank">${post.title.rendered}</a></td>

</tr>

});

}

})

}

As you can see we are using little bit jquery to make the get request to call the wordpress rest api and fetch these posts and display it inside the table.