Click here to Skip to main content
15,867,834 members
Articles / Programming Languages / Javascript
Tip/Trick

Simplest Practical Usage of MongoDB Data in a Meteor App

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
2 Sep 2015CPOL2 min read 7.2K   3  
How to insert values into a MongoDB, and then read them out into a select element in a Meteor app in seven easy steps

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Founder Across Time & Space
United States United States
I am in the process of morphing from a software developer into a portrayer of Mark Twain. My monologue (or one-man play, entitled "The Adventures of Mark Twain: As Told By Himself" and set in 1896) features Twain giving an overview of his life up till then. The performance includes the relating of interesting experiences and humorous anecdotes from Twain's boyhood and youth, his time as a riverboat pilot, his wild and woolly adventures in the Territory of Nevada and California, and experiences as a writer and world traveler, including recollections of meetings with many of the famous and powerful of the 19th century - royalty, business magnates, fellow authors, as well as intimate glimpses into his home life (his parents, siblings, wife, and children).

Peripatetic and picaresque, I have lived in eight states; specifically, besides my native California (where I was born and where I now again reside) in chronological order: New York, Montana, Alaska, Oklahoma, Wisconsin, Idaho, and Missouri.

I am also a writer of both fiction (for which I use a nom de plume, "Blackbird Crow Raven", as a nod to my Native American heritage - I am "½ Cowboy, ½ Indian") and nonfiction, including a two-volume social and cultural history of the U.S. which covers important events from 1620-2006: http://www.lulu.com/spotlight/blackbirdcraven

Comments and Discussions

 
-- There are no messages in this forum --