5.1 Retrieve Data With jQuery

Hey folks, welcome back. Now that we have learned the basics of working with the WP REST API, it's time to implement that knowledge by building something practical. In this lesson, we will be building a post listing with the help of the WP REST API and jQuery. As you can see, this is a very simple post listing darker pierced posts from the server through Ajax, and just paste them here on the page. Each post listing shows the post title, the post excerpt and the link to that post, and clicking on the link will take us to that post by opening a new browser tab. All right so let's get working. I've downloaded a copy of HTML5 boilerplate [INAUDIBLE] from website that contains some very basic files including the index.html file, and some bootstrap styling. I've modified this package a bit and in addition to the default index.html file. I have added two more files, retrieve.html and create.html for retrieving and creating posts. Inside the index.html file, I rendered the Buddhas ship navigation bar at the top that contains links to these two pages. So here is the index.html file open in the browser. And finally in the main.css file I have put some very basic a styling for the post container and post listing increase. One thing to note is that, to make this package work you need to use a web server. And for that purpose, you can use FAMP, ZAMP, LAMP or any of their web server of your choice. I'm using the SGTP server module for node ds, and it allows me to run an SPT Server in any directory on the hard drive. To install this package from Npm, run the command, npm install,STTP-server-genre in your command prompt. And since I have the package already installed I leave that for now. After installing the package, you can navigate inside any directory on your hard drive, and run the command sjdb-server to get the server up and running for the directory. And then you can access the site using the addresses recorded on the screen. Okay so open up the retrieved.html file in your code editor and you will notice this container drive that contain some static demo posts. This post increase contain the title the excerpt and link of the post. We will comment it out,as we will be generating them dynamically. The next thing we need to do is to send an Ajax request to the server to retrieve the collection of posts, and for that purpose we create a self in looking anonymous function. And inside this function, we make a call to the jQueries Ajzx method, and post an object that contains the route for retrieving WordPress post in this URL property. If this call is successful, this success method will be triggered, and it will get the idea of posts as arguments. Now, we cannot create over this array, and create a subsequent HTML element for each array item with the help of jQuery. So first of all we grab a reference to the post container div by using its ID. Inside this div, we will be appending all of our posts, and now using the JavaScript for loop, we will create over the array create four HTML elements for the postEntry, the Title, the Except and the Link. So here we are creating the container for the post entry, and this is a h2 tag for the post title and inside this tag, we are binding the title.grander property of the current post object. Similarly here we create the container div that contains the postAccept, and for the link of the post we're creating an anchor tag by using the link property of the current post object. And now, we can append the postTitle the postAccept and a link to the postEntry element. And finally we can append the postEntry to the main post container. Refresh the page and you will see a list of ten latest posts on the page. One small thing we can do here is to let users know that currently the posts are being loaded, and we can do that by adding a paragraph inside the post container that says Loading posts. And once the posts are loaded, we can start the dispose container to an empty string. And that way, while loading post, it will show a message to the user that the posts are being loaded. We can pass the arguments for retrieving posts using this data property. Inside this property we pass an object that contains the context argument that has the value of embed. So only a subset of the post data will be returned. And if we need to show five posts instead of ten, we can specify the per page argument like this. So now the page will only show five latest posts instead of ten. And of course, you can play with other arguments that are supported for retrieving posts. So you could also pass the page argument for navigating between different pages of the post collection, or they categproes argument if you need to display posts belonging to a certain category. And all of these arguments you can pass in the data object when sending a request using the jQueries Ajax method. So that's all about retrieving and displaying posts with the WPSJPI and jQuery. We could have used better approach for listing the posts on the page, since creating and appending HTML elements to run with jQuery is not the best option. Perhaps we could have used a JavaScript templating library, such as moustache or handlebars. But since this course is geared towards beginners who are just starting out with the WPSJPI, I think that using jQuery proves this point. In the next lesson we will learn to create posts with a WPSJPI and jQuery. See you in the next video.