Currently, I am developing a web application using Angular and Meteor. The integration of Meteor's reactivity with Angular models is working smoothly, except when dealing with arrays.
// Retrieve sentence
$scope.sentence = $meteor.object(Sentences, $stateParams.sentenceId);
// Fetch related sentences
$scope.relatedSentences = $meteor.collection(function() {
return Sentences.find({_id: { $in: $scope.sentence.relatedSentences }});
});
An error message appears in 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 have temporarily disabled the failing find function and displayed the objects in HTML:
$scope.sentence = $meteor.object(Sentences, $stateParams.sentenceId);
$scope.test = typeof $scope.sentence.relatedSentences;
Sentence: {{sentence}}<br/>
Related: {{sentence.relatedSentences}}<br/>
Typeof: {{test}}
The results show:
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 shown as undefined, though it is clearly present in the full object. What could be the issue?
EDIT: Upon testing this on Firefox, the output is:
Related: ["wNs4ByDq7t396WLM3"]
Typeof: object