Instructor: Let's now start to
implement the NBC architecture
by building the model for our search functionality.
In this lecture, you are going to learn
how to build a simple data model
using ES6 classes that we talked about before.
We actually already have our model file
for the search, so let's open it up
so that we can build our model in here.
We're going to use ES6 classes in order to
describe the data model for the search.
The data for the search is really just
the query and then the search results.
The only thing that we're gonna export
from this module here will be this class.
Let's say export default,
and then class called search of course.
Remember how we define a class?
The first thing that we need to do
is to always add the constructor method,
which is a method that's always called
as soon as we create a new object based on the class.
We need the constructor, and in there
we pass the properties that
we want the new object to have.
For example, in this case, we want to have a query
and we then say this.query equals
the query that we passed in.
Remember this pattern, how we define a class?
If not, then don't worry, it's gonna
become a lot more clear once we
start using this class here in a second.
The second thing that's important
about the search here is search results of course.
We're gonna have a method here that we can
use to get results for the search query.
We actually already wrote that, kind of.
Let's get this code from here that we wrote
in the last lecture and put it here into search.
This function that we have here
is kind of the method that we're looking for.
Let's copy it or cut it, paste it here,
and then all we need to do is get rid
of this function keyword because
this is how we define methods.
Usually you define them like this
so just the method name and the parameters
but in case that it's an async function
and it works just the same as it
works with regular functions, so we just used
async keyword and so we say that
this is an asynchronous method of this class.
Of course we don't need this here.
These definitions, they should always
be at the beginning so this kind of import,
we usually always include them right
at the beginning of each of the modules.
A couple of things that we need to change here.
First off, this method here does not
have any parameter because we will
always read the query right from the object itself.
In here, instead of query, we use this.query
because the query will already be
in the object once we call the get results method.
Next up, we also need to change this line here
because we actually want these recipes here
to be saved in the object as well.
Let's say that we want this.result
to be the recipes that we got from the call.
Again, this will become more clear
in a second once we start using this method and this class.
Then we can also log them to the console
just to see if everything is working
and that's actually it, okay?
Very simple, this is all we need
for our search data model.
Let's now go ahead and import it here
into the index, so import search,
from search.
Now let's create a new variable
called search also but this one with
the lower case and so it is a different variable.
Now we use the new keyword, as always
and pass pizza into it, which remember,
is the query, so this query parameter
is one that we need to specify
whenever we create a new object
based on this search class.
Then this query will be attached to the object
as being this.query equals the query that we inputted.
Let's get a look at that actually.
In the console, we can kind of review
how everything works here with classes.
Let's wait for it and of course,
there is this error because I put the wrong
path here, so I forgot to add the models here.
Now it should be okay, and here you go.
So this is now the search object
that we created and you'll see that
it has the query property set to pizza
and then in its prototype it will have the get results.
This is the kind of prototype inheritance
that we talked about all the time
throughout this course here and so
I'm not going to go into that again
because at this point I'm sure that
you're really familiar with how it works.
Now as a final test, let's actually
go ahead and use the get results method.
Search.getResults and that's actually it.
Let's try it again and let's wait for the result.
For some reason it says recipes is not defined,
so let's take a look at what's happening here.
Well, let's just console.log it here,
just to see if, no, something's not working right.
Okay, so actually we have data here
so I'm not really sure why it's not working
so let's try it again here,
just waiting a second here.
Recipes is not defined again, so let's go back
and yeah, so the problem is actually here.
Here we should have this.result.
Now of course, it's going to work just fine.
Wait for it, and here we go.
Here's the data that we were looking for
and so our data model works just fine.
Let's get rid of this console.log
and actually of this one here as well.
Let's just comment it out, maybe we're gonna need it later.
This is how our data model works.
You see that instead of returning
the result right away, it simply stores it
here in this.result so that all the data
about the search are encapsulated inside
of the object, so we have both search
and then the corresponding result
both stored inside of the search object.
This has some advantages that we're gonna
talk about right in the next lecture.