Join Morten Rand-Hendriksen for an in-depth discussion in this video Get just the response you want, part of WordPress: REST API.
- [Narrator] Getting one of the posts listed here on the left-hand side to appear in full on the right-hand side involves grabbing the ID for each of these items, then making a new request to the REST API for the full post content with the embedded content, like the featured image, and so on, and just displaying it on the right-hand side. That process is pretty much identical to the previous AJAX process we just created above here. So, rather than walking you through the entire process one more time, I've already written out the code here. All we're doing here is grabbing the data ID attribute from the clicked link, and then sticking that onto our json_url so we have posts slash post_id and then we append this question mark embed true to get all the embedded content like the author name and the featured image.
Then we run a new AJAX request, json and json_url just like before. If it succeeds, we console log out to new objects. We know it's there. If it fails, we provide a very similar error message to what we had before, except this time it's a single post error. And finally at the bottom here, I've just put in a console log to say single post AJAX complete, so we know the process completed. The big question is, how do we get this to actually run? I mean, we need to hook this functionality to something. So, just like we did in the previous chapter, I'm going to create a separate function here for the post trigger.
So I'll say function post_trigger, and inside this function, I'm now looking for any anchor inside the navigation list. And whenever that is clicked, we want to run get posts. So, navigation list A on click get post. Then we need to make sure post trigger runs only after our navigation list has been populated. Our populating navigation list up here in create post lists, so that means at the bottom, after our four loop has completed, I can call in post_trigger.
Save that, go back into browser, load up a URL. Here we get the lists, then I'll open the inspector. And go to my console. And now, if I click on one of these items, let's say Rearview Mirror: A look back, we get an object, and this object is the correct one. So let's see if I go down here, title, object, Rearview Mirror: A look back at 2016. This means once you enter a URL and click get posts, you get a list on the left-hand side, and then you can click on any of these items to load up that item.
But I want to make this a little more fancy. I want to load in the first item, so the most recent post automatically. I can do that by going back and making a slight change to post_trigger. So below here, I'll grab the same item again. Navigation list A. Then, I'll grab the first of these items, trigger, and click. That means, once I've populated all my navigation list anchors, I find the first of those anchors, run the trigger function on it, and click that item, which triggers the function straight above here, which calls get posts, which grabs the data ID, which runs our AJAX request, and everything runs the way it's supposed to.
Save that to test it. Reload the page, and go to mor10.com again. And now you'll see here, the object appears at the bottom, meaning I now have the first post object, and I'm ready to populate it in the page.
- Using a REST client to communicate with a REST API
- Reviewing available routes, endpoints, and arguments
- Adding custom post types and taxonomies
- Altering the API response
- Using PHP for resiliency
- Passing info using wp_localize_script()
- Setting up a REST API request through AJAX
- Outputting selected post data to the front end
- Formatting post data to match a theme
- Triggering AJAX for an infinite scroll effect
- Using AJAX to load subsequent responses