Accessing nested objects in a Meteor application using Blaze and Spacebars

Question

I am doing a Meteor project for educational purpose. It's a blog with a post list page and a post detail page where logged-in users can add comments. Disclaimer: In the project I cannot use aldeed-simple schema and I won't use pub/sub methods. I am using iron-router and the accounts-password package for user authentication.

Step 1

I' ve set a basic application layout and a basic routing:

Router.route('/posts', function () {
  this.render('navbar', {
  to:"navbar"
  });
 this.render('post_list', {
    to:"main"
  });
});
Router.route('/post/:_id', function () {
  this.render('navbar', {
  to:"navbar"
});
  this.render('post_detail', {
  to:"main", 
data:function(){
  return Posts.findOne({_id:this.params._id})

  }
  });

Step 2

I ve created a post detail view which include a comment form. Find the code below:

<template name="post_detail">
  <div class="container">
  <p>Title: {{title}}</p>
  <h5>Description: </h5>
  <p>{{description}}</p>
  <h4>Comments</h4>
   <ul>
    {{#each comment in comments}}
    <li>{{comment}}</li>

    {{/each}}   
   </ul>
    {{>comments}}
</div>
</template>

<!-- Comments -->

<template name="comments">

<form class="js-add-comment-form">
<input type="text" id="comment" class="form-control"/>
<button type="submit" class="btn btn-default js-add-comment">Add a comment</button>
</form>

Step 3

I've added an event helper to the comment template in order to add user comments. The form takes the comment and the user Id. See code below:

 Template.comments.events({
'submit .js-add-comment-form': function(event) {
  event.preventDefault();
  var comment = event.target.comment.value;
  console.log(comment);
  var user = Meteor.userId();
  var email = Meteor.user().emails[0].address;
  console.log(email)
  console.log(user);
  if (Meteor.user()){
      Posts.update(
        {_id: this._id},
        {$push: {comments: {comments:comment, user}}});

        event.target.comment.value = "";           
    }
   }
  });

Find below a post detail view in the browser:

I've inserted some comments but I cannot display it on the page. Instead I get and Object object for each comment and user id. If I go to the console this is my object:

How can I access those objects and display those field values(comments and user) on the page? Any help ? Thanks Sandro.

Answer 1

This is happening because {{comment}} is an object itself. Here's some sample code to get the message property showing:

<template name="post_detail">
  <div class="container">
  <p>Title: {{title}}</p>
  <h5>Description: </h5>
  <p>{{description}}</p>
  <h4>Comments</h4>
   <ul>
    {{#each comment in comments}}
    <li>{{comment.comments}} | {{emailForUser comment.user}}</li>

    {{/each}}   
   </ul>
    {{>comments}}
</div>
</template>

If you want to get the user's email address as per my example above, you'll want to add a template helper:

Template.post_detail.helpers({
    emailForUser( id ) {
        var user = Meteor.users.findOne({_id: id});
        if( user ) {
            return user.emails[0].address;
        }
    }
});