So let's make sure we can,
pre-populate this drop down field by
querying our author data.
And for this, I'm going to go to the blog JS file
here in their routes folder,
which actually defines all the routes we have
for this application here.
And at the moment I just redirect or render different
templates here. It's really not too complex at the moment.
Now this here, this page
is actually rendered by this
get route for new post here.
and therefore it's here in this get route where I want
to get my author data
so that I can pass this data to the
template so that I can use it in the template
to pre-populate this dropdown field.
Therefore, inside of this route definition,
I want to reach out to my database
and for that, we of course want to import this
DB file we prepared by going up one level
out of the routes folder
into our root project folder,
and then to the data folder.
And there, the database js file.
We import it like this,
and we can store this in a db constant,
or however you want to name it.
And then here in this get route for a new post,
we can call, getDb to get access to
this database we connected to,
and then on that,
we can run various pieces of code.
To be precise,
we can now connect to a collection
and then get the documents in there.
Now in the shell,
we used db dot authors find to get
all the documents and the authors collection.
In the note JS driver,
it's a little bit different.
There, we don't access dot authors here,
instead there we call a collection method that exists
on this database object,
and we passed the name of the collection
we want to talk to as a string parameter
value 2 collection like this.
That's how we establish access to that author's
collection in our Mongo DB database.
Next, this then actually will allow us
to run the same commands we know from the shell.
Like for example, find.
And as you learn find, like this,
without any parameter values will give us all
the documents in this collection.
Which is exactly what I want here.
Therefore, like this, we'll get all the documents
and find here will actually return a promise
because just like establishing a connection
to the database was a task that
could take a little bit longer,
querying for all documents,
of course also takes a little bit longer.
They afraid will actually return a promise.
That's how it's built by the Mongo DB team. And hence,
we can use await here,
since I already have the async
keyword in front of this function, here.
Hence using await here
will work without problems.
And then this will give us our documents,
but actually not like this.
Instead, it will give us a cursor
pointing at our documents.
This sounds very fancy.
In the end, the cursor is a tool
which you can use to move through
the documents that were fetched step-by-step.
That can be helpful, if you're fetching
a large amount of documents,
let's say hundreds or thousands of documents,
and you don't want to use them all at once,
but instead work with them in chunks.
Here, of course, we're not going to fetch
hundreds or thousands of authors,
and therefore, instead of using that cursor,
I want to get all my documents just like this.
And we can do this by adding toArray here
at the end of this operation.
This is how we will get all the author
documents from the authors collection
as an array of data we can work with.
And therefore of course,
instead of just naming those documents,
we can also named this authors
since we know it will be an array of authors.
And now before we do anything else,
let's see if this works by just console logging
authors here
and saving everything,
so we don't use them in the template yet.
We just logged them here.
And then let's reload this add a new post page.
If you do that,
this a route will execute an indeed here.
This is our console log statement.
We see that we do have this array
of JavaScript object.
So of these documents that were fetched from Mongo DB.
So the Mongo DB driver, which we use here
conveniently converts the data stored in
the database, into JavaScript data types for us here.
We get an array of JavaScript objects
with key value pairs
where we for example, have strings.
So we don't need to do any data conversion on our own.
And, therefore, since we see that
we got those authors here,
we can now pass authors as a key
into our template.
And as so often,
I just want to emphasize that authors
here, on the right side of the colon,
refers to the authors here.
So that's the kind of connection we got here.
Whereas authors here is just an arbitrary key.
You could use a different key,
which we are going to use inside
of this template to access
that data and to work with that data there.
And that's what we're going to do next.
We can go to the views and then there
to create posts EJS file to
then work with our author data there.
In here, in create post,
I got this select drop-down,
which is currently missing the options
that it needs.
Now, of course we add options like this,
but I don't want to add the myself.
Instead, I'd like to loop through
all the authors I fetched from the database
and then use that data there.
Now, since I'm in an EJS template here,
we can of course loop
by adding the appropriate EJS text here,
and create a four off loop
where we loop through all the authors,
and then add the opening curly brace.
And here at the bottom,
the closing curly brace.
And authors here, is of course the
key name I chose here,
when defining data for the template.
So here I'm looping for all the authors
and with that, we can then create
our options inside of that four loop,
and between the option tags,
I want to output the human readable author name.
So here we can access author dot name.
We see that in the logged data,
that we've got a name field here.
And for submitting data to the server,
I also want to add a value attribute
to every option, so that this will be
the actual data that's submitted to the server,
when the form is submitted.
And there, I want to submit to the ID instead of the name.
Since we theoretically could have two authors
who are different persons,
but have the same name,
and then it would be great to have the ID
as a unique identification criteria.
So therefore here as a value for this attribute here for the
value attributes, I want to output
author dot underscore ID,
to use that auto-generated ID here.
If we save all of that,
and we reload here,
we have our dropdown of authors now.
And that means that now,
we can also use these authors in our template here
to submit that data to the server.
If you open the Dev tools here, by the way,
and you go to the elements tab
and you inspect that dropdown,
you see that the option values
are the different unique IDs
for the authors here.
They look very similar,
but they have a different last character.
So that's all the working.
And now we can therefore work
on inserting new blog posts
because now we can make this form submittable
and then use the data on our routes
to submit and store the data to the database.