Hitching a Ride on the huMONGOus Meteor, Part 5 of 9

How Can We Stop the Crime and the Gangs if We Act Like We Don't See Them?

While there are other, geekier, ways to insert data, the one that seems most practical to me, and thus the one I will show you, is to do so via user input on the web page (you can also insert Documents (remember, that's a "row") into the Collection (and that that's a "Table") from the Dev Tools console, from the command line, or via the .js file).

This is how the .js file looks after I've added the code to insert the values on the form whose HTML was shown in part 4 of this series:

TimeAndSpace = new Mongo.Collection('timeAndSpace');

if (Meteor.isClient) {
    Template.addTimeSpaceForm.events({
        'submit form': function(event){
            event.preventDefault();
            var city = event.target.city.value;
            var state = event.target.state.value;
            var yearin = event.target.yearin.value;
            var yearout = event.target.yearout.value;

            Meteor.call('insertLocationData', city, state, yearin, yearout);
        }
    });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
  
  Meteor.methods({
      'insertLocationData': function(city, state, yearin, yearout){
          TimeAndSpace.insert({
              ts_city: city,
              ts_state: state,
              ts_yearin: yearin,
              ts_yearout: yearout
          });
      }
  });
}

As you can see, the client block responds to the submit button submitting the form, which calls a method that is in the server block. This handles the insertion of the document.

But how do you know that your record actually got inserted, as you so fervently hope? In the Dev Tools (YBMV, but I am using Chrome, and thus access Chrome Dev Tools via F12), enter:

TimeAndSpace.find().fetch()

If/when this doesn't show you all the documents you have inserted into the collection, add an int arg to the fetch(), such as:

TimeAndSpace.find().fetch(42)

That will return an array of Objects; click on them to expand, and you will end up with something like the following:

No One Must Ever Know the True Identity of Meteor Man!

Due to the peripatetic ways of my parents and myself, not all of the places I have lived display on the scream shot above, but all eight states do, at any rate. Anybody out there live in the same place at the same time as me?

in the next installment of "As the Meteor Blazes", we will read the MongoDB data (using Javascript, rather than from the console using <CollectionName>.find().fetch() as shown above).

All Articles in the Series "Hitching a Ride on the HuMONGOus Meteor" (or, "As the Meteor Blazes")

PART 1: Installing Meteor, creating a Meteor project, and running the out-of-the-box Meteor Javascript App

PART 2: Making changes to the default HTML

PART 3: Creating a MongoDB Collection

PART 4: Creating the HTML to Receive Input from the User

PART 5: Writing MongoDB data

PART 6: Reading MongoDB Data and Displaying it on the page

PART 7: Gussying up/spiffifying the page with HTML and CSS

PART 8: Filtering and Ordering MongoDB Result Sets

PART 9: Meatier Meteor and MongoDB for Mutating Mavens