Exception error when I try to iterate over an array - arrays

Question

I have a collection, Ages, which only holds one key: ages.
In it I store an array of strings like so:
['51', '24', '21', '19', '15']
I struggled a bit with how to iterate over it in the template but this is what I found worked. First the HTML:
<template name="ageFilter">
{{#each age}}
<li>
{{this}}
</li>
{{/each}}
</template>
And the helper:
Template.ageFilter.helpers({
age: function() {
return Ages.findOne().ages
}
})
This is a rather ugly solution that rests on my having only one object in my database (since I use findOne() but it's not a big problem, and it works. The template iterates over the array and outputs it.
There's only one problem: the browser console throws an error!
Exception in template helper: TypeError: Cannot read property 'ages' of undefined
Why is this and how can I get rid of it?

Answer 1

Maybe your age helper is first called before subscription to your Ages publication occurs, therefore the first call(s) to Ages.findOne() end(s) up returning nothing. You could check if your Ages document has been fetched correctly:
Template.ageFilter.helpers({
age: function() {
var ageItem = Ages.findOne();
return (ageItem ? ageItem.ages : null);
}
});
But that's just hacking around the issue. Best approach would be to make sure your template does not get rendered before subscription is done. You could use iron-router and put your subscriptions in waitOn for that. For example:
Router.route('home', {
path: '/',
waitOn: function() {
return Meteor.subscribe('ages');
}
});
Also, overall you might want to change your design and just put one age value per document in your Ages collection, stored in a key like value or something. It seems more logical. This way you could do:
<template name="ageFilter">
{{#each ages}}
<li>
{{value}}
</li>
{{/each}}
</template>
And your helper:
Template.ageFilter.helpers({
ages: function() {
return Ages.find().fetch();
}
});