Join Morten Rand-Hendriksen for an in-depth discussion in this video Make an API call to a live WordPress site, part of WordPress: REST API.
- [Narrator] To make the app easy to navigate, I want to create an unordered list on the left-hand side here that displays the post title in a link, and when you click on that link, we pass the ID of that post to the REST API to gain the content for that particular post and display it here on the right-hand side. That means we need to set up an unordered list and populate each of the list items with each of the items that are being returned from the REST API. If you quickly look over in Postman, you'll see when we pass this request, so W-P json, W-P, V-2, posts, we get a long list of items.
In fact, we get 10 items. And that means we need to loop through each of these items. We can't simply request them individually. But first things first, we need to create a new function that's triggered inside "done" and then we need to set up an unordered list. So, I'll call the new function, "create... "post... "list". Set up the actual function down here. "Create post list" has "object" as a callback. So, I'll set that up down here. And then, inside "create post list", I'll start by setting up a new unordered list.
So, we already have this "nav class "navigation list". I want to clear out whatever's in here and then replace it with a new empty unordered list. That way our app'll function so that we put in a URL, get new post, then we can put in a separate URL, everything gets cleared out, and we get new post over again. So, I'll grab that item, "navigation... "list". First, I'll empty it, and then I'll append... U-L... U-L. Next, I'll set up a variable called, "nav...
"list... "item". We'll populate this variable with the full list items and then append them into this unordered list. To do that, we need to loop through all the available posts and our object. And for that, we'll create a "for" loop. Inside the "for" loop, we'll set up a new variable, "I", and this will be the number item we are looping through. So, we'll start in zero and then we'll go zero, one, two, three, four, five, six, seven, eight, nine. So, I'll set "I" equals zero, meaning that's the first item in our object list. Then, for as long as "I" is smaller than "object...
"colon void zero". Then we need to populate a "data ID" attribute with the ID for the current object. And because we are now working with a specific item within our list, I need to specify what item I am working with 'cause I have 10 of them, so I'll say, "plus object, "square brackets, I...", so that is the "I" defined up here, "dot ID". That means as we're looping through, we'll start with item number zero, so we get the ID for object number zero, then item number one, object number one, and so on, and so on.
"3551". So, that's the ID we'll use to call then the actual post on the right-hand side.
- 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