Fetching Data from the OMDb API

[00:00:00]
>> I'm going to construct my call to the OMDb API. So I'm gonna have a constant of API, and that's gonna be a new URL. And I'm gonna feed https://www.omdbapi.com as our base URL, okay? Then I wanna add the secret API key. And we're gonna do that by setting, we've got this API URL object, and I'm gonna set searchParams.

[00:00:34]
And I want to set a new one, and we'll call it APIkey. And the value is going to be this .env value. And because we're using environment variables, environment variables get set in process.env in Node, so process.env, and then we paste in that OMDb API key, all right?

[00:00:57]
So that's one part. So now this means we've just said, when we send this call to the API, we're proving to OMDb that we are the developer that we claim to be by using the secret key. That's why it's important to keep it secret, because otherwise somebody could use it and it would be represented as us because it's hooked to our email address.

[00:01:17]
Okay, so then the next thing that we need to do is we need to get every movie to send off a request to the OMDb API with its ID so that we can look up the scores for it. That means we need a loop. So there are a lot of ways that we could do this.

[00:01:36]
The way that I'm choosing to do it is I'm gonna create an array of promises, and that is gonna be movies.map. And for each movie we are going to set up a new function. And now we need to use the movie's IMDb ID to look up details and that is done by api.searchParams.set and it just uses the i, which is a very, naming things is hard and that is one of those shortcut names.

[00:02:15]
So we're gonna set the movie's ID as the ID or i. And then we're gonna return this fetch object. So fetch returns a promise, which is why this is gonna be an array of promises that comes out of map. So I'm gonna fetch that API. So we we set our API, we set our query parameters, and now we're fetching that.

[00:02:37]
And we're gonna do that with, It's gonna send us back some JSON, so .then, and we'll do response. And we need to tell the fetch API that we got JSON back, so we set it like that. And then once that's done, we get data. So we've got our movie data here, and I wanna get the scores out.

[00:03:03]
And the the scores are, movies are hard because things have very similar meanings so you get a rating like the PG, PG 13 R. But then you also get ratings, whether or not people liked it. And so I changed it to scores to stop confusing myself. You are welcome to name it whatever you want.

[00:03:24]
OMDb gives us back a ratings object and they capitalize all their property names for reasons unknown. Once we get those scores, then I can return a new object that's gonna include all of the data from the movie. So what I'm doing is I'm getting the object, and then I'm spreading the movie object into it.

[00:03:48]
So that's just a direct copy. And then I wanna include the scores, okay? And so that gives us our object with the movie updated in it, okay? But we're not done yet because what we've done so far is we've created this array of promises and we need to finish handling that.

[00:04:14]
So outside here, we've got our promises, and I want to get our movies with ratings. And I'm gonna do that by awaiting promise.all promises. Does anybody want to take a guess at why I'm doing it like this instead of awaiting here?
>> Just bet at the right answer but just to, Just to have that call back, but the really rate for the JSON process

[00:04:52]
>> Yeah, I think you're on the right track. So what we're doing is if we await here, then each step of the loop has to wait for the call to complete before it can move on to the next step. So we would have to call each of these movies in sequence.

[00:05:08]
So it would be like movie wait for the call, next movie, wait for the call, next movie, wait for the call. And for each movie, it gets that much longer. By doing it this way and getting this array of promises, these all execute in parallel, so we get all of the movies executing at the same time.

[00:05:26]
And then we await down here to make sure that everything is done before we move on. So instead of saying movie then movie then movie, we say all movies and wait for every request to complete, and then move on. I have a blog post about this that, let me just pull it up it's lwj.dev/blog/keep-async-await-from-blocking-execution.

[00:05:59]
So this kinda breaks down how that works and why. I will include a reference to it in the code. Let's use the shorter version of that, okay. So effectively, what we've done here is we have told our code, just to run through it again. We're still using our movies, these movies are still coming in from our JSON database.

[00:06:21]
But before we hand those back, we make a call to the OMDb API with our API key, which is secret, and that'll stay secret because it's in a serverless function. And then for each movie, we send off its ID, get back the data about the movie from the OMDb API, and we add in the scores, so we'll get Metacritic, rotten tomatoes, and IMDb itself, I believe is the other one.

[00:06:47]
And so what is gonna happen there is now we get an updated object and instead of returning just the movies, we're gonna return the movies with ratings. So let's give this a shot. I'm gonna restart and then I'll show you something nice that happens with nella phi dev.

[00:07:06]
You see how it automatically detected that .env file and is loading that for us. So we don't have to write any code to do that, it's just gonna work. And if I come back out here, and I refresh our page, nothing's happening yet. But if I go look at the Network tab, I can see in the movie's response, or I guess we want the preview here.

[00:07:31]
We do get our scores back, so now we're getting the IMDb, rotten tomatoes, and Metacritic, we can see all of these scores. Cool, so now we can do something with it. So let's go and modify our front end code to actually use this. So I'm gonna do that by going into index.HTML.

[00:07:52]
So remember, you will have to create this .env file. I did not push that, that's not up for you.