Hitching a Ride on the huMONGOus Meteor, Part 6 of 9
0/5 (0 vote)
Part 6 of the 9-part series "As the Meteor Blazes" - Reading MongoDB Data and Displaying it on the page
These Gangbangers Need a Wake-up Call
It's fine to enter <collectionName>.find().fetch() at the console to perform a quick-and-clean sanity check that your data is actually getting into your collection, but for more robust reading/querying/fetching/getting of data, we want to do it programmatically. Besides, in that way we can actually use the data in our app.
In the spirit of improvisational jazz, let's get right after it and dive right in. First, add this HTML in the .html file:
The HTM I've added is this:
{{> placesLived}}
. . .
{{#each places}}
{{/each}} {{ts_city}} {{ts_state}} {{ts_yearin}} {{ts_yearout}}
...so that, for context, or for those who came late to the party, the entire .html file is now this:
<head>
<title>timeandspace</title>
</head>
<body>
A List of the Places I Have Lived
{{> addTimeSpaceForm}} {{> placesLived}} </body> <form> <label for="city">City</label> <input type="text" name="city" id="city">
<label for="state">State</label> <input type="text" name="state" id="state">
<label for="yearin">Year Arrived</label> <input type="text" name="yearin" id="yearin">
<label for="yearout">Year Departed</label> <input type="text" name="yearout" id="yearout">
<input type="submit" name="insertdocument" id="insertdocument" value="Add Place Lived"> </form> {{#each places}} {{/each}}
{{ts_city}}
{{ts_state}}
{{ts_yearin}}
{{ts_yearout}}
The Javascript I've added is this:
Template.placesLived.helpers({
places: function () {
// this helper returns a cursor of all of the documents in the collection
return TimeAndSpace.find();
}
});
...so that the entire .js file is now this:
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);
}
});
Template.placesLived.helpers({
places: function () {
// this helper returns a cursor of all of the documents in the collection
return TimeAndSpace.find();
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
Meteor.methods({
'insertLocationData': function(city, state, yearin, yearout){
console.log('attempting to insert a record');
TimeAndSpace.insert({
ts_city: city,
ts_state: state,
ts_yearin: yearin,
ts_yearout: yearout
});
}
});
}
Get up, Meteor Man
Save (As) the .html and .js files, and watch the page refresh. Hopefully you will now have the documents "in hand." And here they are:
In the so-called "real world," we would probably want to filter the results based on some criteria, but just for showing how to fetch documents, we will get any and all documents the collection contains. The code we can add to our .js file to do that is:
Also, this is still quite ugly or, to be magnanimous, plain, but we will work on that a little in a later episode. For now, we should be irrationally exuberant about being able to fetch and display the data.
In the next installment of "As the Meteor Blazes", we will gussy/spiffy up the page so it's not as much of an eyesore.
All Articles in the Series "Hitching a Ride on the HuMONGOus Meteor" (or, "As the Meteor Blazes")
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 6: Reading MongoDB Data and Displaying it on the page
PART 7: Gussying up/spiffifying the page with HTML and CSS