Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:44 minutes
Working with vue apis 400x277
  • Overview
  • Transcript

2.2 Calling the API

In this lesson you’ll learn how to use jQuery to make calls to the OMDb API in preparation for displaying them with the Vue.js framework.

Useful Links

2.2 Calling the API

I've already created a couple of short courses on the basics of the Vue.js framework. And my main purpose in this short course is to show you how to use the Vue.js framework in a more practical way. And so that's why we're using this API, so that we can pull in some real data and then display that data on the screen. But before we can start using Vue to display that data, we need to learn how to actually pull that data in, and again we're gonna be using the OMDb API for that. Now you can look through our HTML here. In our HTML, we have this header section, which has a text input and a button. And this is how we're gonna be searching for movies. Then we have the second div here, which has an id of movies-container. This is gonna be one of our view instances here. We're gonna use view within this div to display our search results. Then we also have this modal, we're using Bootstrap here. And we're using a Bootstrap modal, which is just a pop-up window that will overlay the rest of your content, and we've given it an id of movie-modal. We're also going to be using this as another view instance, where we're going to be displaying specific movie information. So we'll view the title, and a plot summary of our movies within this modal when we click on one of those search results. So, if we go to our settings here, and by the way, you can find the URL for this starting CodePen here in the course notes for this lesson. And in our settings, if we go to our CSS, you can see that we're using Bootstrap 4. And if we jump over to our JavaScript, you can see we're using jQuery, Popper.js, which is required for the Bootstrap 4 modals. And then the Bootstrap JavaScript files. And then, finally, at the end we're using the Vue.js framework. So make sure that you load those in that order so that everything is loaded properly. So that's our HTML, and then you can take a look at the CSS and see how things are styled. It's all pretty simple. But we're gonna jump into our JavaScript window now and we're gonna talk about how to do a simple search using this OMDb API. So I'm going to click on Fork here to create a new copy of our code and in our new copy we'll get started. So, remember, the first thing we talked about that you're going to need from the OMDb website is an API key. This key is basically your own little ID that you can use so that you can start using the API and searching for movies and things like that. So we talked about that in the last lesson, so make sure that you have your API key handy so that you can Enter in your own key and not my key here. And I'm gonna store this is in a variable, so we'll just create a variable here called key. And we're gonna set this to the value that we got from the OMDb website. So, I'm gonna paste in my key here. You would paste in yours. Then I'm gonna put a comment at the end and I'm gonna jump down to the next line. Now I should probably point out that after I'm done recording these videos, I'm gonna take my key out of this code. So when you open up this code, it's not going to work for you initially until you set this key variable equal to your own API key. At that point, it will start working. But for all of the code for the rest of this course, when you initially open it up, don't be surprised if it doesn't work. Once you put your own API key into the code, it should start working just fine. The next thing we need is the base URL that we're gonna be using to do our searches. We're gonna put the base URL here in a variable and then later on when we start doing our searches, we'll just append the things to the end of this URL in order to get our search results. So we're gonna create another variable here again called baseurl. And we're gonna set this equal to a string, as well, so I'm gonna put a set of quotes here. And then if we jump over to the OMDb API website, which again is omdbapi.com. And then, scroll down a little bit to the usage section. I'm gonna grab this first URL here. And we really only need everything up to this equal sign here. We'll copy it, then we'll jump back into CodePen and we'll paste that here. And then we need to append the API key to the end of it. So we have our closing quotation mark after our equal sign, and then we're going to add or concatenate the API key to the end of that URL. And then we'll put a semicolon to end our statement here. We've got two variables declared. And now I wanna create a function for searching for our movies. So I'm gonna call this function searchMovies, and then we want to be able to pass a value into this function. And this value is going to be the keyword that we're searching for. So let's create a variable here called keyword. And then we'll put our opening and closing curly brackets for that function. And inside this function, we're gonna be using AJAX to make this call. We're going to be calling this URL up here plus whatever we append to the end of it. We're going to be calling that URL using AJAX. And jQuery actually makes AJAX very, very easy to use. The way we do this is we type in the $ for jQuery and then .ajax parentheses. And then inside the parentheses, we need a JavaScript object, which is denoted by curly brackets. And we'll nudge that closing curly bracket and closing parentheses down a couple of lines. And in-between those curly brackets we need to point to the URL property. So url: space, and then the URL that we're gonna be calling with this AJAX call. Well, we're gonna be calling our baseurl. But we also need to append some stuff to the end of it, because right now we have the URL?apikey =, and then our API key. But then we also need to append the search keyword to the end of that. So we're going to add something to the end of our URL. So + and then inside quotation marks, I'm gonna type in &s=, so after our API key we need an ampersand and then this s here, if you remember from our last lesson, is the search parameter. This is going to allow us to search for a movie title, and it will return to us any number of results. As many results as it finds that includes that search keyword that you use. And then we're gonna set that equal to whatever keyword is passed into this function. So after our closing quotation mark here, we're gonna say + keyword. But we don't know if the keyword that the user entered in is going to be URL friendly. So instead of just typing in the word keyword there, I'm gonna use the encodeURIComponent method within JavaScript to encode that keyword and make sure that it is friendly as a URL. So inside the parenthesis for this method, we're gonna pass in our key word. So that's our URL. And then at the end of this AJAX call, after our closing parenthesis here, we're gonna do a .then. So then, once this AJAX call has been made and it pulls in the data, we need to do something with that data, and that's what we're gonna do with this then method. So, then, open and close parenthesis, and inside the parenthesis here we need to pass a function. So we're gonna create a function here. And inside the parentheses for this function, we're going to pass in the data that we're retrieving whenever we call that URL. So we're gonna call that data. And then after this first parenthesis, we're gonna add opening and closing curly brackets for that function. And then we'll nudge that closing curly bracket and closing parenthesis down a couple of lines. And that will be the end of our AJAX and our then call, so we'll put a semicolon at the end after that closing parenthesis. And then inside this then function, this is where we would put all the JavaScript logic that we need to display all of our search results. But all I'm gonna do here for the purpose of this particular lesson is I'm going to log that data. So we'll do a console.log, we're gonna pass in that data and let's see how that works. So we've created the searchMovies method or function. Now we need to call that function, so we'll call searchMovies and we're gonna pass in a value of Ghostbusters. And l'm gonna save them, l am gonna click on, actually, first of all, let's open up our console, l hit F12 to open up my Chrome console window. Make sure that you have console selected here. And then I'm gonna save that and click on the Run button. And we get this error than says mixed content. And this error is showing up because CodePen is secured, it's on an HTTPS website and the URL that we are calling is just HTTP. And we can't have mixed content like that, so we're gonna change this URL that we're calling up here to an HTTPS, so it's secure as well. So we'll save that and run again, and hopefully this time it works. So we did a console log of our data here. And that data is what's showing up right here where it says search. And you'll see that it has an array with ten items in it. And if we click on this little triangle here, we can expand that out. And then we can expand out this search item. And then we can see all of our search results here. So our very first one is the original Ghostbusters movie, 1984. We can see the IMDb ID here, later on we're gonna use this ID when we click on that movie to open up our modal and see more information about that movie. So we're gonna do another search using this ID later on. And then we have our type, which is a movie, and then we have our poster, which is basically just a URL for the poster image for that movie. So now that we know how to pull this data and view that data in our console. In the next lesson, we're gonna jump into view and start talking about how we can display it in the browser. So thank you for watching and I'll see you then.

Back to the top