Fetching all articles

Summary

In this lesson, we move beyond using the Sails console to interact with our article model and begin displaying articles directly in our app. We start by modifying the homepage to show the five most recent articles using Waterline queries, sorting them by createdAt in descending order, and limiting the results to five. The articles are then passed to the view as locals and displayed using EJS templating.

Next, we implement a similar approach for the articles page, displaying all articles sorted by createdAt in descending order. We enhance navigation by adding links between the homepage and the articles page for easy access. Finally, we review how locals work in Sails and how data retrieved from the database is passed to views.

Transcript

Hello there. In the last lesson, we used the Sails console to interact with our article model and add new articles. But we need to be able to manage articles directly from our app—view, create, update, and delete them. So let's start by displaying articles on both the homepage and the articles page.

On the homepage, we want to display the top five most recent articles. To do this, we'll modify the view-home action inside the home controller. Currently, it's only rendering the view, but we need to pass data to it. In Sails, the data passed to views is called locals—variables sent from the server (our action) to the view.

These locals don't automatically appear in your HTML; they must be explicitly referenced in your template using EJS syntax. Let's fetch the top five recent articles and pass them to the homepage view.

We'll modify the fn function in view-home and create a recentArticles variable:

const recentArticles = await Article.find()
  .sort('createdAt DESC')
  .limit(5);

This query retrieves all articles, sorts them by createdAt in descending order (most recent first), and limits the result to five. We'll then return this collection to the view:

return { recentArticles };

If there are no articles, this returns an empty array.

Now, in our homepage view (home.ejs), we’ll use EJS to loop through and display these articles:

<ul>
  <% for (let recentArticle of recentArticles) { %>
    <li><%= recentArticle.title %></li>
  <% } %>
</ul>

To see this in action, we restart the server (sails lift), open Firefox, and check localhost:1337. At first, no articles appear because we haven't used them in the template yet. After adding the EJS loop, we see the recent articles listed.

Next, we apply the same process to the articles page. First, we update the view:

<ul>
  <% for (let article of articles) { %>
    <li><%= article.title %></li>
  <% } %>
</ul>

Then, we modify view-articles to retrieve all articles, sorting them by createdAt in descending order:

const articles = await Article.find().sort('createdAt DESC');
return { articles };

After restarting the server and refreshing the /articles page, we can now see the complete list of articles.

To improve navigation, we add simple links:

• On the homepage:

  <p><a href="/articles">See all articles</a></p>

• On the articles page:

  <p><a href="/">Back to home</a></p>

Finally, we review what we've done:

• We retrieved articles using Waterline queries.

• We sorted them by createdAt in descending order.

• We used locals to pass data to views.

• We displayed articles using EJS loops.

• We added basic navigation between pages.

And that’s it! We've successfully rendered articles on both pages using simple Waterline queries and EJS templating.