Hey there you awesome beasts,
I am creating a little pet project and want to have one collection have a drop down to select a value from another collection - just like a foreign key in an SQL database.
For this, I have made use of the following packages;
aldeed:autoform
jeremy:selectize
comerc:autoform-selectize
In the collection I can easily define the SimpleSchema and make use of selectize make the awesome select box, but when I try to populate the options with a .get() function I come across some issues - namely;
“Exception in template helper: TypeError: Cannot read property ‘get’ of undefined”
I have uploaded the code to GitHub (https://github.com/auBusinessDaD/mapMaker), so you can see exactly what is happening - be forewarned, I am not a professional developer so my code is not the super efficient. The issue is occuring at;
“collectons > campaigns.js”
The code in question is;
'game': {
type: String,
label: "Game",
autoform: {
type: 'selectize',
options: function() {
//return an array of the "Games" and their id's
return Games.get();
}
},
optional: true
},
Looking forward to any help that can be provided.
Keep up the awesome!
D
I originally created a comment on the meteor-autoform-selectize git hub, but I believe the description above is still better;
Any help would be appreciated.
Shouldn’t it just be Games.find()? 
Or Games.find().fetch() if it needs to be an array instead of a cursor.
Thanks Herteby, I thought I tried this (must have made some other changes that made this work now).
I still have an issue though, now it is just returning objects (i.e. I believe I need to have the items return back as { label: itemName, value: itemID } for autoform selectize to show them as options).
Any ideas on how to do this?
An extra odd thing, if I only do return Games.find(); it errors out - which I presume is because it is returning as a cursor (instead of an array);
I have tried manually configuring the returning data using the following code in the autoform selectize code - this doesn’t give any issues in the console BUT the select is empty still. To find out where the issue is I added a console log which returned the below image;
'game': {
type: String,
label: "Game",
autoform: {
type: 'selectize',
options: function() {
let gameSelection = Games.find().fetch();
let gamesArray = [];
for ( i = 0; i < gameSelection.length; i++ ) {
gamesArray.push({
label: gameSelection[ i ].name,
value: gameSelection[ i ]._id
});
};
console.log( gamesArray );
return gamesArray;
}
},
optional: true
},
The objects are all correct, which is a win, BUT I don’t know why it is getting called 8 times (four blank and four with the correct data).
This could be completely off course, but is what i have come up with so far. I have updated my code to the github repository in my original text.
Appreciate any help.
Hmm, looks what you’re doing should work. This may not exactly solve any problems, but when you need to do stuff with objects and arrays, have a look at http://underscorejs.org/ (The underscore library is included in Meteor). With Underscore you could simplify your options function to this:
return _.map(Games.find().fetch(), function(game){
return {label:game.name, value:game._id};
});
_.map takes an array, calls the function you define on each item, and then returns an array with the results.
Thanks for the simplified code - that works brilliantly, and will have to get to know that in more detail as that simplifies code so much.
I have applied that code, and once more no errors - so I applied the console.log again and it is getting the data (several times for some reason like before) but the selectize is still empty.
Could it be that the resulting return is not an array? How do I return all of them as an array?
I am having this same issue. Did you find a solution for this?
