Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, you will start reading data from the database. You'll display all the articles on the main page, as well as an individual article.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In this video,
we'll start reading from the database.
0:00
We're going to display all
the articles on the main page,
0:03
then display an individual article when
a user clicks an article's Read More link.
0:06
First, we'll find individual articles.
0:11
In the routes articles.js file,
0:14
I'll scroll to where I've defined
the GET route for an individual article.
0:16
This route renders
the articles show view and
0:20
displays an article based on
the id parameter in the URL path.
0:23
Currently, it sets the article local
variables for the view to an empty object.
0:28
Within the handler function,
0:32
we'll use Sequelize's findByPk method to
find an article by its primary key or id.
0:33
FindByPk is an asynchronous call that
returns a promise whose resolved
0:40
value is the single instance retrieved
by the primary key or id value.
0:45
First, initialize
a variable named article,
0:50
to await, Article.findByPk.
0:55
Then retrieve an article by
passing findByPk the article id.
1:00
In Express Routes, you use route
parameters to capture values specified in
1:06
the URL path, req.params returns
parameters in the matched route.
1:10
In this case, we need the id
value specified in the path.
1:16
So pass the findByPk method,
req.params.id.
1:20
Next, in res.render,
we'll render the article
1:27
returned by findByPk within
the article show view,
1:31
by replacing the empty object
with the article variable.
1:35
Which is the single instance
returned by findByPk,
1:40
holding all the data of the article entry,
like title, author, and body.
1:43
And that data is made available to
the view via local variables like
1:48
article.title and
article.body for instance.
1:52
And since both the article key and
value here are the same,
1:57
you can use the object shorthand
syntax by including just article.
2:00
Now in this object,
2:06
the value assigned to title is
currently the string Article Title.
2:07
So to display an article's title in
the browser's title bar or page tab,
2:12
I'll replace the string
with article.title.
2:17
All right, let's test this route.
2:20
Over in the app,
I'll change the URL path to articles/1.
2:23
I see the article entry I
submitted earlier, and the title,
2:28
My First Article displays in the tab,
great.
2:32
Next, I'll work on retrieving
all the articles and
2:36
rendering them in the root route or
main Articles page.
2:39
Back in articles.js, I'll scroll up to
the GET method route for all the articles.
2:43
Within the handler,
I'll use Sequelize's findAll method
2:48
to retrieve a collection of articles
instead of a single article.
2:52
I'll initialize a variable named articles,
to await, Article.findAll.
2:55
Articles will hold all returned entries.
3:05
So now in res.render,
3:07
I'll pass the articles data to
the articles/index view with articles.
3:09
The app is now all set to retrieve and
display articles.
3:16
In the app, I'll test the route
by creating a new article titled,
3:20
My Second Article, authored by me.
3:26
And add some sample text for the body.
3:31
When I click Submit, the app correctly
redirects to the article page.
3:38
And when I click to go back
to the article list page,
3:43
I see that the newly created
article appears last.
3:47
Instead of displaying the articles
from oldest to newest,
3:50
I want to reorder them in descending
order, from most recent to oldest.
3:54
You've learned that the findAll
method takes an options object.
3:58
And within that object, you can specify
any number of criteria to filter
4:03
the returned results,
including their order.
4:07
To order a result set, use the order key,
set to an array of arrays.
4:10
The order value is an array of arrays
because you can order by multiple
4:17
attributes or columns.
4:20
Each array includes the attribute
you want to order by and
4:22
in which order, ascending or descending.
4:26
Remember, Sequelize automatically
adds the attributes created at and
4:29
updated at to your model.
4:34
That way you'll know when the entry
went into the database and
4:36
when it was last updated.
4:39
In this case, we want to return and
4:41
order the result according to their
created at timestamp in descending order.
4:43
So in the array,
I'll add the strings created at and
4:49
DESC for descending in uppercase.
4:56
When I go back to the main page,
5:03
I see that the articles
are now in the desired order.
5:05
I'll add another article
titled My Third Article.
5:10
Click Submit.
5:23
And see it appear as the first article,
perfect!
5:25
The dates currently display in the form
of timestamps generated by Sequelize.
5:30
So in the next video, we'll define
a custom instance level method in
5:35
the article model to
better format the date.
5:38
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up