Building out the comment view

Summary

In this lesson, we complete our commenting system by adding a form to submit comments and displaying them under each article.

Key steps:

1. Create the comment form in article.ejs.

2. Submit the comment using a POST request to the correct article.

3. Populate and display comments associated with an article.

By the end of this lesson, our blog will have a fully functional comment system!

Transcript

We’re wrapping up this chapter, and it might be a little long, but it’s going to be interesting because we’ll explore parts of Sails that you may not have seen before. So let’s dive in.

Adding the comment form

We need to add a form to submit comments in article.ejs. This form will:

• Submit comments to the correct article using a POST request.

• Include two inputs: one for the commenter’s name and one for the comment body.

Let's create the form:

<form action="/articles/<%= article.id %>/comments" method="POST">
  <input type="text" name="commenter" placeholder="Your Name" required />
  <textarea name="body" placeholder="Your Comment" required></textarea>
  <button type="submit">Comment</button>
</form>

This ensures:

• The action points to the article’s comment endpoint.

• The input fields capture the commenter’s name and the comment text.

• The button submits the comment.

Fixing layout issues

To improve the layout, we can wrap the form in a <p> tag or add a <br /> to separate elements properly:

<p>
  <form>...</form>
</p>

Now, if we restart the Sails server and test it in Firefox at localhost:1337, we should be able to submit comments.

Verifying comment submission

Currently, the comment is saved, but we don’t see it displayed. Let's confirm in the Sails console:

sails console --dontLift

Then run:

await Comment.find();

This should return an array of comments, each linked to an article ID.

Displaying comments for each article

To show comments under each article, we need to fetch the comments when retrieving an article.

We use Waterline’s .populate() method:

const article = await Article.findOne({ id: 3 }).populate('comments');
console.log(article);

This retrieves the article and all its comments in one query.

Now, let’s update our action that fetches an article to include comments:

const article = await Article.findOne({ id: inputs.id }).populate('comments');
return exits.success({ article });

With this change, each article now includes its comments when fetched.

Rendering comments in article.ejs

Now, let’s display the comments under the article.

<h2>Comments</h2>
<ul>
  <% for (let comment of article.comments) { %>
    <li>
      <strong><%= comment.commenter %></strong>: <%= comment.body %>
    </li>
  <% } %>
</ul>

Fixing an iteration bug

If we don’t see comments, check the loop syntax:

• for (let comment **of** article.comments) {} instead of for (let comment **in** article.comments) {}.

After fixing, refreshing the page should now display all submitted comments! 🎉

✅ Now, comments appear under each article!

This completes our commenting system in Sails. 🚀