Simplest Practical Usage of MongoDB Data in a Meteor App

Populate a select element in a Meteor app with data from a MongoDB Collection

This tip demonstrates how to populate a Collection named "foreignVisaTypes" and then populate a select element named and id'd "selvisatype" while working with a template named "posttravelwizard"

Note: The first, third, and fourth steps are not necessary, but good practice; if you skip any of those three, skip them all.

First, In the console, run the "meteor remove autopublish" command (if you haven't already done so).

Second, declare the Collection at the top of the .js file (neither in the ".isClient" nor the ".isServer' block, but above those):

ForeignVisaTypes = new Mongo.Collection("foreignVisaTypes");

Third, publish the Collection within the ".isServer" block of the .js file (or in a .js file in your project's Server folder, if you've got such a folder):

Meteor.publish("foreignVisaTypes", function () {
  return ForeignVisaTypes.find();
});

Fourth, subscribe to the Collection within the ".isClient" block (or in a .js file in your project's Client folder, if you've got such a folder):

Meteor.subscribe("foreignVisaTypes");

Fifth, in the ".isServer" startup method (or in a .js file in your project's Server folder, if you've got such a folder), check for contents in the DB; if there are none, populate it:

Meteor.startup(function () {
  // code to run on server at startup
  if (ForeignVisaTypes.find().count() == 0) {
    console.log('ForeignVisaTypes collection empty; inserting');

    ForeignVisaTypes.insert({ value: "pleaseselect", display: "Please Select" });
    ForeignVisaTypes.insert({ value: "notapplicable", display: "Not Applicable" });
    ForeignVisaTypes.insert({ value: "b1", display: "B-1" });
    ForeignVisaTypes.insert({ value: "b2", display: "B-2" });
    ForeignVisaTypes.insert({ value: "f1", display: "F-1" });
    ForeignVisaTypes.insert({ value: "h1b", display: "H-1B" });
    ForeignVisaTypes.insert({ value: "h2b", display: "H-2B" });
    ForeignVisaTypes.insert({ value: "h3", display: "H-3" });
    ForeignVisaTypes.insert({ value: "j1", display: "J-1" });
    ForeignVisaTypes.insert({ value: "p1", display: "P-1" });
    ForeignVisaTypes.insert({ value: "p2", display: "P-2" });
    ForeignVisaTypes.insert({ value: "p3", display: "P-3" });
    ForeignVisaTypes.insert({ value: "tn", display: "TN" });
  }
});

Note: Make sure to put the code above in the ".isServer" startup method (or in a .js file in your project's Server folder, provided you've got such a folder), not the ".isClient" startup method. I learned the hard way that doing it client-side leads to adding more and more records, as at startup the client doesn't have any records at first.

Sixth and penultimately, add this helper to the ".isClient" block of your .js file (or in a .js file in your project's Client folder, if you've got such a folder):

Template.posttravelwizard.helpers({
    foreignVisaTypes: function() {
        return ForeignVisaTypes.find();
    }
});

Last but not least (Seventh), in your HTML file, add some "Spacebars" code (Meteor's take on the "handlebars" template syntax) inside the definition of the Select element that you want to populate:

<select name="selvisatype" id="selvisatype" title="Please select a visa type">
    {{#each foreignVisaTypes}}
    <option value={{value}}>{{display}}</option>
    {{/each}}
</select>

And, as the donners and purveyors of fine berets are wont to say, Voilà! -- the select element will be populated with the contents of the foreignVisaTypes MongoDB Collection.