All language subtitles for 055 Fetching Data From The API.en

All right, so we're going to get started on the JavaScript.

But first, I want to look at the API we're using, which is the movie Dbag.

So you need to actually sign up because you do need an API key when you make your requests.

So you can see I'm already logged in here.

And if you go to more and then API, you'll see this documentation.

And if we look at discover examples, it gives you some endpoints that you can hit.

So discover movie you can sort by, you know, release date or get a certain release date range you

can sort by popularity and so on.

But what we need to do is back in this API overview, this link right here, developers dot the movie

dbag.

If you click on that, you'll see a page like this and it says to register for an API key, click the

click.

This link here, you can see I already have an API key.

So for me it says, if you'd like to edit the details of your app, click here.

You should have an option to create a new app.

And if I click here, you'll see I just called my movie app.

I used localhost for the URL and it's going to ask you, you know, why you want this API?

What do you plan on doing with this?

And you can just say something like, you know, I'm creating a non production app using this API or

something like that.

So once you get that API key, you'll be able to make requests.

Now, in the JavaScript here, I want to have a couple constants.

One is going to be the API underscore you URL and that's going to be yes.

And then it's API as a subdomain dot the movie dbag and then slash three because that's the version

of the API.

And then if we look at the go back to this page here, discover examples, it's going to be slash,

discover slash movie and I want to sort by popularity.

So I'm going to use this endpoint right here.

So paste that and it's going to sort by popularity which is going to be descending.

And then in addition to that, let's put an amp up here.

We need our API underscore key and I'm going to set that equal to my key, which is right here.

And I'll just I mean, you guys can use my key.

I'm not sure what the rate limiting is or anything.

You probably want to create your own, but if you really, really don't want to, I'll leave this key

in the in the repository.

So I'm going to paste that in.

And this gives you a ton of results.

And you can you can you can create pagination if you want.

I'm not going to get into that.

So I'm just going to do ampersand page equals one, which gives me, I believe the first like thirty

results or something.

And we can actually see what this gives us.

If I grab that and go into chrome, you'll see it gives me an object with the page, the total results,

the total pages and then a results array.

That's where all the movie data is and has like the popularity, the vote count, the poster path.

Here is the image.

Notice there's no path, it's just slash and then an image file.

So we need to get the image path for that.

I'll show you how to do that in a second.

We get the idea if it's Adults', the title description, so you can use all this data in your application.

We're only using a small portion of it now.

As far as the image goes, we have this poster path.

But again, there's no there's no Eurail here.

So I have this page.

This is from the documentation we actually need to use something like this before the image names.

So what I'm going to do is grab this, not the actual image here, the JPEG, but just grab that URL

and let's say const image underscore path and I'm going to set it to that.

And this last one is the width is the size.

I'm going to use twelve eighty here instead of five hundred, but that's going to go before the image.

And we actually don't want the slash because if we look at the response here for poster path it already

has the slash in front of it.

So don't add the slash here.

And then we also want a search end point.

So I'm going to copy this and let's call this search you URL and it's going to be the same route you

earlier.

But instead of discover we're going to use search, search and then slash movie.

We don't want the by.

What I do want though, what I do want is my API key.

So let's say.

Do API underscore key equals and.

That in there and then the last thing we'll say ampersand, we want a query, so it's a query equals

and what I'll do is just open a single double quote because I want to be able to concatenate a search

term from our search box into here.

All right.

Because basically what we're doing is setting the, you know, the most popular movies on the on the

landing page when we first get there.

But if we use the search box, we're going to use this end point and we're going to add a query into

here.

So just put one double quote here and surround both and, you know, surround this in single quotes.

All right.

So now that we have that done, I just want to see if we can make a request.

And then in the next video, we'll do the DOM stuff, you know, adding it to the page.

So let's create a function.

I'm going to use a sink away.

So it's going to be an async function called get movies and it's going to take in a neutral and let's

say const response.

Araz, we want to await because remember, Fach returns a promise so you don't have to use a sink away,

but then you'd have to do, you know, the dot then and stuff.

So we're going to say, wait, fetch, pass in are you Earl?

And then that will return a promise.

But it's not going to give us the format of JSON just yet.

We want to create another variable called data and we want to await for a resident, Jason, that will

give us the actual data.

So now let's consider log data and remember the response in the browser.

It had a results, right?

Had a results array.

So I want to just look at that and then I'll go up here and let's say get initial movies and we're going

to call, get movies and pass in our API URL.

So I'm going to save this.

And it's we can actually make this smaller now and it's minimized that.

OK, so I just want to open up my console here and you can see we have an array of 20 objects and we

have access to all this data here.

All right.

So we know that we can actually get the data.

Now, let's go ahead and do the search.

I'm not doing anything with the DOM just yet.

We'll do that in the next video.

But let's have an event listener on on the form.

So what we do have to bring that in to do that.

So I'm actually going to go under these constants, though.

So let's say const form and say document dot get element by D and I believe I have an idea form.

You still check that.

So up in the header.

Yeah.

Idea form.

All right, so bring that in and then down here, let's say form dot add event listener, we're going

to listen for a submit and put a function here with our event object.

And since it's a submit we need to call e dot prevent default so that it doesn't actually, you know,

submit to the page and then let's create a variable called search term and set that to search, which

we have to bring in as well, which is the the input.

So we'll say const search.

And I think I gave that an idea of search.

OK, and then we want the value of that, because, remember, that's an input, so we want to get that

value, put it in a variable and let's check to see if search term exists and also if search term is

not equal to anything.

All right.

So then we'll call get movies, which we have above.

Now we need a neutral this is where the search API or search you outcomes and actually let's call it

search API.

All right.

And what we want to do is take the whatever we type in is going to get put in.

We want to concatenate that on to our search API.

So get movies, search API and then we're going to add on to that whatever the search term is.

OK, so that will give us a response and then we'll just clear the search dot value.

So we'll set search value equal to nothing and then we'll just have an else.

So if we submit without having anything in there, I'll just reload the page.

So window dot location, window, dot location, dot reload.

All right.

So what should happen now is when I search something here and submit it, you call, get movies.

It should take the search API with the search term and give us those results.

So let's just say, I don't know.

I don't even know what to put here.

What was some of the movies?

We'll just say the word hard.

All right.

So we get a result here.

Let's take a look.

I just I want to check out the titles.

So title Hard Kill.

Look at this one here titled Die Hard Title Hard Target.

All right.

So we can see that the search is actually working.

Now, we have the you know, the the HDP part of it done well.

We're making requests are getting a response.

So in the next video, we want to take this this functionality here and take this data and put it into

the dorm so that it shows here.

All right.

So we'll do that next.