Nesting {{#each}} in Handlebars 304 error

Question

My Nested {{#each}} does not work. I am Scraping article titles to my page and I'm using MongoDB/Mongoose. For each article (that I named News) I want user to post comments and view previous comments. My routes, console.log, and the database itself shows that my api routes are working, but I can't get the comments to display. My handlebars has the articles rendering to screen, but when GETting the comments it returns a 304.

The Articles display as I intend, it only has a problem with the comments {{#each News}} is each article {{#each comment}} is nested inside each News.

{{#each News}}
        <div class="panel-block is-active">
          <ul>
            <li>
              <div class="level-left">

                <h2  class="subtitle">
                  <a href="https://www.atptour.com{{this.url}}">
                  {{this.headline}}
                  </a>
                </h2>
              </div>
            </li>
            <li>
             <img width="348" src="https://www.atptour.com{{this.thumbNail}}">

            </li>
            <li>
             <p>{{category}}</p>
            </li>
            <li>
                {{!-- on click remove class .is-hidden on #getComments --}}
              <p id="showComments" data-id="{{this._id}}" >Comments</p>
            </li>
            <li>
              {{#each comment}}
              <article id="getComments" class="media is-hidden">
                <div class="media-content">
                  <div class="content">
                    <p>
                      <small>{{this.time}}</small>
                      <br />
                      {{this.body}}
                    </p>
                  </div>
                </div>
                <div class="media-right">
                  <button class="delete"></button>
                </div>
              </article>
              {{/each}}
              {{!-- on click remove class .is-hidden on #postComments --}}
              <a id="addComment" >Add Comment</a>
              {{!-- TO POST A COMMENT --}}
              <article id="postComment" class="media is-hidden">
                <div class="media-content">
                  <div class="field">
                    <p class="control">
                      <textarea
                        class="textarea"
                        placeholder="Add a comment..."
                      ></textarea>
                    </p>
                  </div>
                  <div class="level">
                    <div class="level-left">
                      <div class="level-item">

                        <a class="button is-info">Submit</a>
                      </div>
                    </div>
                  </div>
                </div>
              </article>
            </li>
          </ul>
        </div>
        {{/each}}

In the {{#each comment}} {{this.time}} and {{this.body}} is blank. But if I simply put {{this}} I get the _id if each comment. The context must be wrong but I don't know why. The comments are properly associated to the News because I can check the get route and it's all there correctly.

Here are the schemas if it helps

new articles
const NewsSchema = new Schema({
  headline: {
    type: String,
    required: true,
  },
  thumbNail: {
    type: String,
    required: true,
  },
  category: {
    type: String,
    required: true,
  },

  url: {
    type: String,
    required: true,
  },

  // Comments will populate the News
  comment: [
    {
      type: Schema.Types.ObjectId,
      ref: "Comment",
    },
  ],
});
const News = mongoose.model("News", NewsSchema);

comments

const CommentSchema = new Schema({
  time: {
    type: Date,
    default: Date.now,
    required: true,
  },

  body: {
    type: String,
    required: true,
  },
});
const Comment = mongoose.model("Comment", CommentSchema);

Answer 1

It wasn't a handlebars problem at all! It was a route problem.

I was doing this:

app.get("/", function(req, res) {
db.News.find()
  .then(News => {
    res.render("index", { News });
  })
  .catch(err => {
    console.log(err);
  });

});

When I should have been doing this

app.get("/", function(req, res) {
db.News.find()
  .populate("comment")
  .then(News => {
    res.render("index", { News });
  })
  .catch(err => {
    console.log(err);
  });

});

I forgot to populate in the res.render. (I was populating the api route, but not this 1!)