Why doesn't my query NOT recognize my valid variable? - meteor

Question

Help! Something very strange is happening within my app.
I have a merchantReview template that is supposed to show the number of reviewers.
Below is what the template looks like:
<template name="merchantReview">
<div> {{numberOfReviewers}} Total</div>
And what the helper code looks like:
Template.merchantReview.helpers({
'numberOfReviewers': function () {
var numberOfReviewers = 0;
var merchantProfileId = Session.get('offerUserId2');
console.log("The numberOfReviews _id session is: " + merchantProfileId );
merchantReviews.find({_id: merchantProfileId}).map(function (doc)
{
numberOfReviewers += doc.noOfReviewers;
});
return numberOfReviewers;
}
});
This yields nothing on the merchantReview page at all.
Lets have a look at the Router:
Router.route('/merchantReview/:_id', {
template: 'merchantReview',
data: function(){
},
waitOn: function(){
return Meteor.subscribe('merchantReviews');
}
});
And what am subscribing to:
Meteor.publish('merchantReviews', function publishmerchantReviews(){
return merchantReviews.find();
});
Now for the "Something very strange" part.
When I run this following code (which is similar to the helper code) in the chrome browser console, I get mixed results.
When I run the below:
var numberOfReviewers = 0;
var merchantProfileId = Session.get('offerUserId2');
console.log("The _id is: " + merchantProfileId );
merchantReviews.find({_id: merchantProfileId}).map(function (doc)
{
numberOfReviewers += doc.noOfReviewers;
});
console.log (numberOfReviewers);
...it yields:
The _id is: udEnfEmy5DSBvDsSy
0
As you see, it bypasses the merchantReviews.find query.
However when slightly alter the code, and run:
var numberOfReviewers = 0;
var merchantProfileId = Session.get('offerUserId2');
console.log("The _id is: " + merchantProfileId );
merchantReviews.find({_id: "udEnfEmy5DSBvDsSy"}).map(function (doc)
{
numberOfReviewers += doc.noOfReviewers;
});
console.log (numberOfReviewers);
This time it yields:
The _id is: udEnfEmy5DSBvDsSy
93
Strange isn't it?
Can anyone explain why the
merchantReviews.find({_id: merchantProfileId})... query doesn't recognize the merchantProfileId variable which holds the udEnfEmy5DSBvDsSy value? And how do I fix this?

Answer 1

The reason why the variable wasn't being recognized in the query is because the variable was in array form instead of string form.
I realized this by console.log("The _id is: " + merchantProfileId );
This would sometimes yield:
["udEnfEmy5DSBvDsSy"]
I resolved his by sanitizing the variable to ensure its a string not an array using the toString() function. So in code its : merchantProfileId.toString();
Following is the full resolution in code:
var numberOfReviewers = 0;
var merchantProfileId = Session.get('offerUserId2');
// Below immediately sanitize the variable ensuring it is a string
// before its used in the query.
merchantProfileId = merchantProfileId.toString();
console.log("The _id is: " + merchantProfileId );
merchantReviews.find({_id: merchantProfileId}).map(function (doc)
{
numberOfReviewers += doc.noOfReviewers;
});
console.log (numberOfReviewers);
This yields:
The _id is: udEnfEmy5DSBvDsSy
104

Answer 2

You can simplify and speed up your helper by just using .count() on the cursor. If, as you mentioned in the comments, your offerUserId2 session variable returns an array then you can just reference its first element with [0]:
Template.merchantReview.helpers({
numberOfReviewers() {
return merchantReviews.find(Session.get('offerUserId2')[0]).count();
}
})

Answer 3

Your problem is a classic javascript async gotcha. Looking at your code,
merchantReviews.find({_id: "udEnfEmy5DSBvDsSy"}).map(function (doc)
{
numberOfReviewers += doc.noOfReviewers;
});
console.log (numberOfReviewers);
The adding to numberOfReviewers happens in the callback for merchantReviews.find() - which usually happens at some later time. Your console.log likely happens before that, which explains why you get wierd results. If you change your code to this, you will get consistent results.
merchantReviews.find({_id: "udEnfEmy5DSBvDsSy"}).map(function (doc)
{
numberOfReviewers += doc.noOfReviewers;
console.log (numberOfReviewers);
});
Think of it this way, in javascript time moves to the right, not down the page. So indented code that is part of a callback (and indented to the right) happens after the code at the bottom.