Reputation: 672
I'm creating a simple app to learn Meteor and am having trouble understanding how to query the DB properly. After changing the structure of my data, I now get [object Object] in my template instead of the information that was originally showing. The DB and API call seem to be working properly. I think this has something to do with my Session variables or helper function.
Here's the code:
On Client:
FiledRoutes = new Meteor.Collection('filedRoutes');
Template.routesTemplate.helpers({
filedRoutes: function() {
return FiledRoutes.find();
}
});
Deps.autorun(function() {
Meteor.subscribe('filedRoutes', Session.get("origin"), Session.get("destination"));
})
Template.airportForm.events({
"submit form": function(event) {
event.preventDefault()
var origin = $('#origin').val();
var destination = $('#destination').val();
Session.set('origin', $('#origin').val());
Session.set('destination', $('#destination').val());
Meteor.call("callFltAware", origin, destination, function (e, result) {
if (!e && result) {
console.log(result.data.RoutesBetweenAirportsExResult.data);
}
});
}
})
On Server:
FiledRoutes = new Meteor.Collection('filedRoutes');
Meteor.publish('filedRoutes', function(origin, destination) {
return FiledRoutes.find({airports: {origin: origin, destination: destination}});
})
Meteor.startup(function() {
// code to run on server at startup
});
var url = "http://flightxml.flightaware.com/json/FlightXML2/";
var username = "user";
var apiKey = "pass";
Meteor.methods({
callFltAware: function(origin, destination) {
this.unblock()
try {
var result = HTTP.call("GET", url + 'RoutesBetweenAirportsEx', {
auth: "user:pass",
params: {
origin: origin,
destination: destination,
howMany: 15,
offset: 0,
maxDepartureAge: "10 days",
maxFileAge: "30 days"
}
});
var r = result.data.RoutesBetweenAirportsExResult.data;
for (var i = 0; i < r.length; i++) {
var route = {
airports: {
origin: origin,
destination: destination
},
route: {
route: r[i].route,
filedAltitude_max:
r[i].filedAltitude_max,
filedAltitude_min: r[i].filedAltitude_min
}
}
FiledRoutes.insert(route);
}
return result
} catch (e) {
console && console.log && console.log('Exception calling', url)
throw e
}
}
})
Template where I'm getting [object Object]:
<template name="routesTemplate">
<div class="filedRoute">
{{#each filedRoutes}}
{{>route}}
{{/each}}
</div>
<template name="route">
<div class="route">
<li>{{route}}</li>
</div>
</template>
This was working properly before I put origin and destination together in an object.
Upvotes: 1
Views: 3888
Reputation: 5472
Here is the problem:
In your template, you are printing route
:
<template name="route">
<div class="route">
<li>{{route}}</li>
</div>
</template>
which is a javascript object (a json document) like:
airports: {
origin: origin,
destination: destination
},
route: {
route: r[i].route,
filedAltitude_max: r[i].filedAltitude_max,
filedAltitude_min: r[i].filedAltitude_min
}
To access the properties (fields) of your document, you need to reference them in your template. For example, this would work and print out the correct strings:
<template name="route">
<div class="route">
<li>
From {{route.airports.origin}} to {{route.airports.destination}}<br/>
<i>Altitude between {{route.route.filedAltitude_min}} and {{route.route.filedAltitude_max}}</i>
</li>
</div>
</template>
As you see, you need to break down your object and access each key individually.
You probably had a String
previously and as you iterated over your app to create a richer route document, you changed it into a document, hence the Object
type.
Upvotes: 1