- [Instructor] All right, let's get started. The first thing we need to do is grab the user submitted URL pass it to Ajax and get Ajax to request data from the rest API at the site in question. We already have the URL here under the variable, rest_url, so now we can create a new function that will then run Ajax on that URL and get the data. And this function is pretty much identical to what we used in the previous chapters. You're already familiar with everything that's going on here. I'll start by calling that new function get_post_list.
Then down here below, I'll set it up. And before I start the function, I want to clearly indicate to the visitor that something is happening. I'll do that by visualizing a spinner. Now the spinner is already sitting index.html file down here, and navigation list we have nav-loader and there's the spinner graphic. This is the same spinner we used in the previous chapter. It's currently being hidden using CSS, so I'll grab that item and toggle it so that it displays. Next I need to grab the rest_url and append what I need to it so I get the right response back.
Here I'm looking to populate a list the last 10 posts on the site. So that means I need to append posts at the end. I'll set up var json_url equals rest_url plus posts and I don't need the embed version here, 'cause I'm not getting any features images or anything like that, but you could if you wanted to. Then it's time to set up the Ajax function itself. And this is identical to what we've done previously. Ajax, datatype, json, and url, json_url.
Then we set up our pseudo promise structure, so start with done, function, I'll grab the object. This is what's returned from Ajax. And here, I'm just going to console log for now. So I can see that I actually get an object. Then fail, this is what we would get if there is no rest API at the other end, or if the route to the rest API is incorrect. Here I'm just going to echo back the same error we had before. The one that says that didn't work try a different URL.
And I'll just change the error message in the console. And then finally, for always, I want to hide the nav-loader, so it doesn't keep sitting there and spinning. Save this, go back in the browser, reload the page, and try to plug in a URL. Spinner appears and then nothing happens. And that's because we haven't done anything to the data yet. But if I inspect this and go look in the console you should see here, we have an array of 10 objects. So those would be the 10 posts in question.
I can also try to plug in some garbage here, just to see what happens. That says, That didn't work. Try a different URL. And if I try a URL I know has no rest API at the other end, like linkedin.com, I should also get the same message. And down here, it'll tell me clearly this is a problem. There's an error here and then it'll say, error, rest error, nothing returned for Ajax. Now we have all the data for the last 10 posts. The next step is to populate the list on the left hand side here, so we can get to each of the posts.
- 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