Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Find Entries5:42 with Guil Hernandez
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.
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 up