I've got this in my client.js file
Template.data.champ = Meteor.call("checkLeague", function(error, results) {
console.log(results.data.data);
return results.data.data;
});
So it shows fine in the console.log but it doesn't actually show on the webpage.
This is my html file with handlebars template
<body>
{{> hello}}
{{> data}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
</template>
<template name="data">
{{#each champ}}
{{name}}
{{/each}}
</template>
From my understanding (which is very limited in terms of Handlebars) but the {{#each champ}} iterates over objects? But for some reason, nothing is being displayed on the page.
This is the object structure (displayed in the console).
Object {Aatrox: Object, Ahri: Object, Akali: Object, Alistar: Object, Amumu: Object…}
Aatrox: Object
id: "Aatrox"
image: Object
key: "266"
name: "Aatrox"
title: "the Darkin Blade"
__proto__: Object
Ahri: Object
Akali: Object
Alistar: Object
Amumu: Object
Anivia: Object
Annie: Object
Ashe: Object
So basically I am passing an object that has properties which have values of objects. I assume the {{#each} iterates over the properties and gives access to the values (which is an object) and then I try to access the name
property of that variable in the handlebars
template but it doesn't work.
Peppe's answer is correct - here is an option for how to deal with this situation:
Template.data.created = function() {
Meteor.call('checkLeague', function(error, results) {
Session.set('champ', results.data.data);
});
};
Template.data.champ = function() {
return Session.get('champ');
};
The data is loaded when the template is created, and asynchronously stored into a session variable. Keep in mind that this isn't reactive, but that's hard to overcome since your data is coming from a method call.