retrieve data from a collection in meteor

Question

I am trying to display a summation of all of the information that was submitted in a form.

 Template.SingleDailylog.helpers({ personInCharge: ()=>{ const id = FlowRouter.getParam('id'); const profile = Dailylog.findOne({_id:id}); const name = profile.personInCharge; return name; } }); 

 <div class="form-group col-md-6"> <input value="{{personInCharge}}" type="text" class="form-control" placeholder="Name"> <label for="first">Person In Charge</label> </div> 

This does insert the information, but I am still getting an error:

meteor.js?hash=0504f43f667698535416b00eb44eb6f53161cb63:1048 Exception in template helper: TypeError: Cannot read property 'personInCharge' of undefined at Object.personInCharge ( http://localhost:3000/app/app.js?hash=e537a3bd311bc41765fe473a7cd9cf9609139dc9:8544:26 ) at http://localhost:3000/packages/blaze.js?hash=adc5286b78e5c0f8e7f56a602f77eefb5def6bf1:3051:16 at http://localhost:3000/packages/blaze.js?hash=adc5286b78e5c0f8e7f56a602f77eefb5def6bf1:1715:16 at http://localhost:3000/packages/blaze.js?hash=adc5286b78e5c0f8e7f56a602f77eefb5def6bf1:3103:66 at Function.Template._withTemplateInstanceFunc

How am I getting an error, but the data that is displayed is correct? This is preventing me from saving edits to the data.

Answer 1

The helper is trying to access a nested value ( personInCharge ) from an object that does not exist yet ( profile )

If you want to prevent this exception from occurring, you have two options here:

Option 1 - Prevent access to undefined Objects inside the helper

You could for example maybe wrap each of your variables in an if statement like so:

Template.SingleDailylog.helpers({
  personInCharge: ()=>{
    const id, profile, name;

    id = FlowRouter.getParam('id');

    if (id) {
        profile = Dailylog.findOne({_id:id});
    }
    if (profile && profile.personInCharge) { // I always check nested things this way
        name = profile.personInCharge;
    }
    if (name) {
        return name;
    }

});

In this case, if id and profile and profile.personInCharge are undefined, the code in the if blocks won't execute, and therefore it won't be trying to access nested variables that don't exist yet when the template is created, which will keep the helper from throwing exceptions.

Option 2 - Prevent the helper from being called

You could also use a reactive variable to indicate, whether the subscription is ready and prevent the template from calling the helper, if not.

// const subscription = //... use this if you use a global suscription

Template.SingleDailylog.onCreated (function () {
  const instance = this;
  instance.state = new ReactiveDict();
  instance.autorun(() => {
    const subscription = //... use this for Template level subscription
    if (subscription.ready()) {
      instance.state.set('loadComplete', true);
    }
  });
})

Then add a helper for loadComplete :

Template.SingleDailylog.helpers({
  personInCharge() {
    const id = FlowRouter.getParam('id');
    const profile = Dailylog.findOne({_id:id});
    const name = profile.personInCharge;
    return name;
  },
  loadComplete () {
    return Template.instance().state.get('loadComplete');
  }
});

and use it to call the personInCharge helper only if loadComplete is true:

<div class="form-group col-md-6">
    {{#if loadComplete}}
    <input value="{{personInCharge}}" type="text" class="form-control" placeholder="Name">
    <label for="first">Person In Charge</label>
    {{else}}
    <div>Loading....</div>
    {{/if}}
</div>