So let's make sure we can view posts here
on the All Posts page.
For this, in blog.js, where I have all my routes,
it's this route which has to be changed.
Because that is
where we are rendering this posts-list template.
Therefore, here, I wanna fetch all my posts
and then pass them to that template.
And for that, we'll, first of all,
turn this into an async function,
so that we can soon use the await keyword.
Because of course,
all these database operations are asynchronous tasks
that can take a bit longer,
and hence, they all return promises.
That's how the MongoDB package works.
And then, we can use our database with getDb
and reach out to our posts collection here.
And here, I simply wanna find all my posts.
That's the idea here,
and I, again, wanna get them as an array
so that I can work with them just like this in the code.
And then here, I got my posts by awaiting this operation.
That's how we can get all the posts that are stored
in this collection.
Now, of course, the question is now
which data do we need here?
And for this,
it's worth looking at that posts-list template.
In there, I haven't written any code yet
that would define which data should be output here.
But in the end,
what I wanna output here is that post-item include file,
which sits in the includes folder.
And there, I need to post the title,
then the name of the author, not the email address,
not the ID, just the name, then this summary text.
And then, for these buttons, I'll need the ID
of the post later on, but we will worry about that later.
So that means that I don't need the body of the post
and I don't need all the author data here.
I also don't need the date.
Hence, back in blog.js,
we can use this feature called projection,
which I also introduced in the last core section,
to limit the amount of data that's fetched
for every document.
We don't have to do that,
but fetching less data, of course,
means that less data is transferred over the wire
and that can, therefore, be a good idea,
to fetch as little data as required to save bandwidth
on your server.
Of course, here,
since it's all running on our local machine,
and since we're dealing with small amounts of data,
that doesn't matter too much,
but it's not a bad habit to get into
to fetch and work only with the data you really need
instead of always getting everything.
And therefore,
and also to be fair to practice projection,
we can tune this find method,
and we can pass in this second parameter value,
which allows to decide which data we wanna fetch.
But in order to pass in a second value,
we also have to pass in a first value.
And the first value would define
how we wanna filter the data we want to fetch.
Here, I don't wanna filter,
I wanna get all the posts.
But that's easy to implement,
we just have to pass in an empty JavaScript object,
which basically means that no conditions are defined,
and hence, all the data will be fetched.
And then, we can pass in that second parameter value,
which also has a JavaScript object,
which now configures which values we wanna fetch
for the documents that match our conditions.
So in this case for all the documents.
And you learned that this can be controlled by,
for example, saying title: 1.
This means that I do wanna include the title
for every post.
As soon as you define at least one projection like this,
all the other fields, except for the ID,
will automatically be excluded
so now we have to list all the fields
that we wanna include here.
For example, I also wanna get the summary,
so I also said summary: 1,
and I also, as mentioned, wanna get the author name.
The ID will be fetched automatically
so we don't have to list that here.
The author name of course is a nested field,
but we can simply write "author.name"
between quotes here and set this to 1.
So you can also project
and include or exclude nested fields.
With that, if I reformat this
to make this a bit easier to read,
this is now our full query that will fetch us all our posts,
and that will fetch us this data
plus the ID for every post.
And hence, we can now hand this off to the template
and make a post key available to the template,
and store the post data under that key
in that data which is passed to the template.
Hence, now it's time to continue
in that posts-list template here, here.
There, I now wanna output all my posts
and I also wanted to handle the case
that we maybe don't have any posts yet.
For this, we can, first of all, start with an if check
and check if posts is false,
so if we don't have posts,
or if posts.length is equal to zero,
which also means that we don't have any posts.
And in that case, I wanna output something.
And then here, we also need to close the curly braces.
Don't forget this.
And here, I just wanna say
"No posts found - maybe start creating some", like this,
and then maybe also add an anchor element,
where I point at the new-post page
and say, "Create a new Post"
and also give this a class of "btn",
which is a predefined CSS class written down
in the CSS files you find in this project.
Now, of course, we know we already have a post.
So we also wanna handle the else case,
that we do have posts, and also close this curly brace here.
And here, I now wanna loop through all the posts
and repeat this post-item includes template for every post.
First of all, though, I'll create an ordered list,
doesn't really matter if it's ordered or unordered,
and I'll give it an ID of posts-list for styling reasons,
because some of the predefined CSS styles rely on this ID.
And then, in there, we can write a for-of loop
and loop through all the post of posts,
open the curly brace,
and then also close the curly brace here.
And between those opening and closing tags,
we can then add a list item for every post we fetched.
And instead of this list item,
I now wanna include this post-item EJS file.
So here, I'll use this dash EJS opening tag here
and call the built-in include function
and then close my tag here and include includes/post-item.
Now to this included file, I wanna make this post available,
so I'll add a second parameter value
to the include function, which is an object with data
that will be provided to this included template.
And here, I'll just expose this post here
under a key also named post.
So the left side here is a new key made available
to the template.
The right side is referring to this post,
which I got from this loop.
So this will now replicate the post-item template
for every post I fetched.
And hence, we can now work in this post-item template.
Here for example, I wanna output the title,
and that can be output with post.title.
Post is available as a key because of this key I chose here
for the data passed to post-item EJS,
and title is available
because that's the property name I chose
for the documents stored in the database.
If you're storing your data with different properties
in your documents in the database,
you have to access different properties here.
Now here, I wanna output the author name,
and therefore, that's post.author.name.
We fetched that data,
and we didn't need to join any data
or run any extra queries,
because we stored that data together
with our other posts data.
And here, we then output post.summary, like this.
Now, I will work on these buttons and links later.
For the moment, that's it.
So if you save all those files, if you reload All Posts,
you should see something like this.
You should see your first post that you added
with that data that's fetched from the database.
And that's, of course, another huge step forward.
As a next step,
I wanna make sure that this View Post button works.
And for this, of course,
that's also a great practice for you.
With the things we already learned in this
and the previous section,
you should now be able to also hook up this link here,
which it actually is,
to that post-detail template which we got here.
And you should be able to register a new route for this,
handle different IDs in that route for the different posts,
fetch the data for the different posts by their IDs,
and pass that post data to the template
to then output it there.
Definitely try this on your own first.
We're going to do this together in the next lecture.