Accessing and Displaying WordPress Blog using WordPress REST API

I had the template of my React website built and I wanted to pull data from my WordPress two blogs into my website.  In order to have all of this information in one place, I wanted access to the data from both blogs (my travel blog and my technical blog), preferably in JSON.

In my original React template, I was making Ajax requests to my own server.  However, since I now wanted to pull data from WordPress, I adjusted my Ajax request’s URL to be a URL corresponding to the WordPress REST API instead of a URL defined in my Server.js.  Here is the Ajax Request:

$.ajax({
            url: 'https://public-api.wordpress.com/rest/v1.1/sites/mysquarecm.wordpress.com/posts”,
            dataType: 'json',
            cache: false,
        })
         .done(function(result){
             this.setState({data: result});
         }.bind(this))
         .fail(function(xhr, status, errorThrown) {
             console.error(this.props.url, status, errorThrown.toString());
         }.bind(this));   

Mysquarecm.wordpress.com is the name of my website and I added /posts as my parameter because I wanted to pull all the posts from my blog, by default the WordPress API will return up to 20 posts if you do not specify the number of posts to return.

If successful, I am setting the state of data to result (the JSON data returned from the API call).  Otherwise, I am logging an error in the console.

Now, data is storing all of my JSON data and I must Parse this data in order to display it on my React webpage.

In order to do this, I will parse through all of the posts using the Javascript map function and maps each post to a formatted Blog Post.  It stores these formatted posts in the variable memberNodes and then embeds and then returns the memberNodes along with additional formatting.

The code that does this:

render: function() {
        if (this.state.data.posts){
            var memberNodes = this.state.data.posts.map(function(post) {
                return (
                    <Blog>
                    title = {post.title}
                    content = {post.content}
                    URL = {post.URL}
                    </Blog>
                    );
                });
            }

            return (
            <div>
            <div>  
            <div className = {style.blogContent}>          
            {memberNodes}
            </div>
            </div>
            <button type="submit" onClick={this.handleSubmit}>Load More </button>
            </div>
            );
        }

The Blog Component that formats the blog data it receives from the code above (since this uses dangerouslySetInnerHtml only use if server code is from trustworthy source!) :

module.exports = React.createClass({
    render: function() {
        return (
        	  
              <div dangerouslySetInnerHTML={{__html: '<h1>' + this.props.children[1] + '</h1>' + this.props.children[3] 
              + '<a title=\"Zhong Lane\" href=' + this.props.children[5] + ' target=\"_blank\">Comment on this post. </a></p>\n<p style=\"text-align:left;\">'
              +  '</br>' }} />

        );
    }
});

To view the whole project, you can visit https://github.com/lac26/mywebsite.

To summarize, I made a call to the Wodpress API, received JSON data, formatted the JSON post data via the Javascript map function using another component titled Blog, stored the formatted post data in a variable memberNodes, and then embedded memberNodes directly into my HTML.

You can view documentation for additional parameters for WordPress Developers API at the official site: https://developer.wordpress.com/docs/api/.  It has documentation for receiving a specified number of posts, how to load comments related to a post, how to get a post by ID etc.

Thank you for reading, feel free to comment below!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s