Angular / Meteor: Array is undefined

Question

I'm building an Angular / Meteor application, using Meteor's reactivity to populated an Angular model. It is all working fine until I start working with arrays.

// get sentence
$scope.sentence = $meteor.object(Sentences, $stateParams.sentenceId);

// related sentences
$scope.relatedSentences = $meteor.collection(function() {
   return Sentences.find({_id: { $in: $scope.sentence.relatedSentences }}); 
});  

I get this error on the JavaScript console

Error: $in needs an array
    at Error (native)
    at Object.ELEMENT_OPERATORS.$in.compileElementSelector     (http://localhost:3000/packages/minimongo.js?af9eb9d7447544ca9b839a3dcf7ed2da2209b56c:1894:15)
    at http://localhost:3000/packages/minimongo.js?af9eb9d7447544ca9b839a3dcf7ed2da2209b56c:1576:19
    at Function._.each._.forEach (http://localhost:3000/packages/underscore.js?    0a80a8623e1b40b5df5a05582f288ddd586eaa18:164:22)

In the Mongo / Meteor console

meteor:PRIMARY> db.sentences.find({_id: "sp75iWPNqpbp2ypmy"});
{ "_id" : "sp75iWPNqpbp2ypmy", "sentence" : "Here is sentence 1 ", "language" : "en", "level" : "A1", "public" : true, "relatedSentences" : [ "wNs4ByDq7t396WLM3" ] }

And

meteor:PRIMARY> db.sentences.find({_id: { $in: [ "wNs4ByDq7t396WLM3" ] }});  
{ "_id" : "wNs4ByDq7t396WLM3", "sentence" : "Here is sentence 0 ", "language" : "en", "level" : "A1", "public" : true, "relatedSentences" : [ ] }

I then commented out the failing find and have outputted the objects to html

$scope.sentence = $meteor.object(Sentences, $stateParams.sentenceId);
$scope.test = typeof $scope.sentence.relatedSentences;

Sentence: {{sentence}}<br/>
Related: {{sentence.relatedSentences}}<br/>
Typeof: {{test}}

Results

Sentence: {"autorunComputation":    {"stopped":false,"invalidated":false,"firstRun":false,"_id":47,"_onInvalidateCallbacks":  [null,null],"_parent":null,"_recomputing":false},"_id":"oFMp7swYyQsXkYsKz","sent ence":"Here is sentence  2","language":"en","level":"A1","public":true,"relatedSentences":    ["wNs4ByDq7t396WLM3"]}
Related: ["wNs4ByDq7t396WLM3"]
Typeof: undefined

The Array is marked as undefined , but it is clearly shown in the full object. What am I missing?

EDIT When running the above test on Firefox it returns an object

Related: ["wNs4ByDq7t396WLM3"]
Typeof: object 

Related issue

Answer 1

$scope.test is only bound one time when this code initially runs. There is no data binding, so even if $scope.sentence.relatedSentences changes, test will not. The issue is that $scope.sentence.relatedSentences is populated asynchronously.

This would also apply to $scope.relatedSentences -- you are trying to set it initially before $scope.sentence.relatedSentences is available. You can use .subscribe on the value returned from .object to set this once the data is available.

$scope.sentence.subscribe().then(function () {
    $scope.relatedSentences = $meteor.collection(function() {
        return Sentences.find({_id: { $in: $scope.sentence.relatedSentences }}); 
    });  
});