Welcome back, my friends.
Today, we got to do we got to work on the search model, so we need to create that searching functionality.
OK, so this is running, right?
Make sure that you're doing this and running it before.
So I just copy the euro and paste it back to Google.
So I'm using Google.
This time it's a better representation of the console and I think that we need to have.
Right.
And the way we thatching the data, it's going to be will be displayed differently in Firefox than in
Google.
So I use Google because it's more intuitive.
OK, now here, open up the map.
He started to go into the models and we do have already have this search, Jair.
So this will be our model in our first things.
First, we need to create a class here in that class because I'm going to be called search that the
search class.
And actually we need to export this class back to the the controller.
OK, now in the control, last time we fetch the data and we've got to clean this part because this
was just for testing, but we're going to use it.
And so how are we going to do so?
How we write classes.
So first, how we export class.
So export default and we're going to use here the default way not named.
And I'm going to say class search.
We define classes with this curly brackets here right now, inside every class, we do have a constructor.
So we need to define the constructor in this constructor.
We need to passing parameters.
So these parameters with these parameters are the ones that we want this class or every object of this
class to have them to have access to them.
So the best way to do it is just to create the query.
Remember last time we did have a query in that query.
Later on will come from this board.
We are not there yet, but we need to find a way how to get it manually.
Now, now.
So I have the search query here and how we set these dot query equal to the query we are passing here
through the constructor.
Cool.
Now next part is we need to create the method that will fetch the data.
We already have this method here, so I'm going to copy the entire one and I'm going to paste it here.
And we need to change a couple of things.
Now, when we defining a method here in in classes, we don't have to we we don't have to specify the
word function.
Right.
So we don't have to specify the word function, but we can leave this for async, meaning that this
will be the asynchronous function because it was the Ehsani synchronous function back here.
Right now we're going to do the same same thing.
But we need to change a couple of things.
So async instead of testing the API, we are going to say, OK, that will be get this will we get search
result.
Right.
And it will be async.
It will.
So here we need to clean up a little bit.
This mess here.
What I want is, yep, I want this to stay.
I don't need this board.
So we are searching using this query.
I don't need this.
Don't need this.
So try and catch block.
So make sure that you or you are cleaning.
Come on.
What's happening?
We are cleaning up this code because if we don't do it right now, it will be it will stay like that
and I don't really like.
So that's the API.
We don't need it anymore, OK?
I think we don't have any error.
So for now, let's move with this one to the right side.
Ian, we are done.
So we have the key.
That's our key.
We do have the fetch method.
That's going to be a weight.
We searching by the key and the query.
And by the way, this query, we should replace it.
So we have this query from the constructor.
We don't need to pass it here.
Like before.
That was just for testing out the testing out the method.
Right.
Testing out.
If we're going to get some response now here, are we going to get this query?
But I need to use this keyword, right, because it's coming from there.
This query, what else we need here.
So we are pretty much done now.
The data, we are going to change that and we're going to say, OK, so the data will stay.
We also need to store this data somewhere.
So what I'm going to do is I'm going to create another piece, dot movies and I'm going to study the
data, see the data, their data that search.
So remember, I use this keyword.
Just take note that I'm using this keyword and you will see that after that, how he's done and how
the object that we're going to do it will look like.
So these DOT movies and what we can do because he comes along after those movies.
Right.
I can kind of like this part here just to see the result.
OK, so we are done here.
So we created the asynchronous function like this.
We just get rid of the function where we don't need to pass any parameter here because we grabbing from
the constructor and remember to change this query in the constructor.
Good.
Now here I'm saving that data and that's it.
Try and catch block where before we work, same as before.
Make sure that you cut this whitespace here.
You don't need it.
Save it.
Go back to the index.
So first first things first.
We need to import it.
Make sure that you import everything on top here import and what we're going to say search from here.
We're going to define the model's search.
Right, because the search is actually located in the SJS models.
So you can see the path here on top.
Right.
So I've got that one semicolon here.
What else we need so.
Well, we still don't have a way how to get the data from the search right from this here.
So what we need to do so what we need to do is actually to pass some kind of the data through the constructor
here because we have the constructor and that will be the first things call.
Now, what I'm going to create, I'm going to say const movie search, and this will be actually the
instance of the search class.
So how we create an instance, new search.
Remember, we have done this before and here I'm going to pass a data.
This data, for example, it will be Batmen, right.
And actually the data will go through the constructor.
So we are setting Dysport.
Nice.
So let's consular.
So what we can do, we can control Lunga, the movie Search and let's see what will happen.
Good, save it and go back to the to the browser, inspect, console log, you know, we do have a lot
of things here.
Let me just hide this one.
Unnecessary things.
OK, so we do have this search object inside.
We do have the query right.
In a prototype.
We do have the access of the get search result.
Right.
This is how we do.
We have this search object with the query inside this.
This is this is the one because we called because Movie Search is the instance of the class search and
we exported this class and imported here.
That's why we do have access.
Now, what one more thing that we do have access is that movie search as an object.
It can access these, get search results.
So let's see if that will be it.
Will that if that will working and we have some sort of reference from the movies is not defined.
OK, but.
We are getting back the search with the movies, with the 10 movies, so we get and get results.
I don't know what is a problem.
We're going to check in a second, but we're getting these very often, and that's pretty much cool.
That's what we need it.
But let's see what was the problem here.
So if you refresh one more, you will see reference to horror movies is not defined.
And actually these movies comes from this line here.
Of course, this movie is not defined because I'm trying to pass constant here.
That is not defined anywhere.
These are not movies, is not seen as movies.
Right.
So it should be these movies that should get rid of that one and save it.
Here it is.
Let's refresh to see.
Here is now we do have the search that's come from the this come from this port.
So we can comment that one.
Right.
So I do have only the 10 results I need.
Right.
Because I told you that the DeSapio will return 10 results.
So congratulations.
What we have done.
We just created our first API call and we also that first apical and such method is done and our searching
model is pretty much working, is doing its job.
So this is how are we going to do it?
We can export the classis from the models and we're going to do this here, the method.
So when I say methods or functions, I mean the same thing.
So they are same, pretty much.
So the functions are here to do his job.
And after that we can just grab that information here in the index.
And after this we go, Jesus, sorry, we've got to change this a little bit here, because this is
not the way we this is not the final, because we need to find a way how we can grab the data from here
not to pass it through the constructor like that, through the class constructor.
OK, but this was the first step and that is pretty much it.
So we have done everything that we have.
The object of the movies.
Right, contains the query and also the get search result contains this area of then and that's pretty
much awesome.
So after that, we're going to do so.
We're going to work probably on The View or the the controller.
I will see.
But it doesn't matter.
It will be still interesting lecture and make sure that you watch that one as well.
So take care and I will see you in the next one.