Trouble populating table: {{return Collection.find().fetch()}} doesnt give array

help
1

Good day all,
I am newby to meteor. I am having trouble to link my database to my table (handsontable). Would somebody be so kind as to scan my few lines of code and tell me where I am going wrong?
I can populate the table with a static array. However for some reason {{getData}} doesnt work in the same manner.
I have removed autopublish, insecure and added accounts-password, accounts-ui and olragon:handsontable.

Below my html (I had to change <> to () so that the html gets shown in the post)

(head
(title)Sales report(/title)
(script src=“handsontable/lib/jquery.min.js”)(/script)
(script src=“handsontable/dist/handsontable.full.js”)(/script)
(link rel=“stylesheet” media=“screen” href=“handsontable/dist/handsontable.full.css”)
(/head)
(body)
(h1)title(/h1)
{{)loginButtons}}
{{)Table}}
(/body)

(template name=“Table”)
(div class=“handsontable” id=“hot”)(/div)
(script)
var StaticData = [[‘Year’, ‘Kia’, ‘Nissan’],[‘2008’, 10, 11]];
var $container = $("#hot");
$container.handsontable({
data: StaticData // This works
//data: {{getData}} // This doesn’t work
});
(/script)
(/template)

Below my js
~~~~~~~~~~~~
VehicleSales = new Mongo.Collection('vehicles');

if(Meteor.isClient){
Meteor.call('insertSalesData', 2008, 10, 5);
Meteor.call('insertSalesData', 2009, 11, 15);

Meteor.subscribe('SalesReport');

Template.Table.helpers({
'getData':function(){ return VehicleSales.find().fetch() }
});
}

if(Meteor.isServer){
Meteor.publish('SalesReport',function(){
    var currentUserId = this.userId;
    return VehicleSales.find({createdBy:currentUserId},{sort: {Year:-1}});
});

Meteor.methods({
'insertSalesData':function(year,kiasales,nissansales){
    var currentUserId = Meteor.userId();
    VehicleSales.insert({Year:year, Kia:kiasales, Nissan:nissansales});
    },
'removeSalesData':function(year_id){
    VehicleSales.remove(year_id);
    },
'modifySalesData':function(year_id, kiasales, nissansales){
    VehicleSales.update(year_id, {$set: {Kia:kiasales,Nissan:nissansales}});
    }
})
}
~~~~~~~~~~~~
Any advice will be GREATLY appreciated.
Best regards,
George
2

It seems you are populating your table by hand with JQuery. This is not the correct way to do it, when your html is parsed, the data is probably not ready.
If you want to make your code work with some JQuery plugin, you have to look at the rendered callback in the docs.
This is tricky, not meteorish (== reactive) and i fear not newbie friendly

3

I guess your two calls to the insertSalesData method are just to put something in the collection for testing. Meteor now supports upsert, so you might want to use that to prevent creation of new records every time it runs, but that’s just a minor thing.

It seems like you forgot to add createdBy to your insert line, so that could definitely be messing you up. In fact, this might be the only thing keeping your code from working, as your find() is looking for records created by the current user, which there won’t be any of.

Meteor.methods({
	'insertSalesData':function(year,kiasales,nissansales){
		VehicleSales.insert({Year:year, Kia:kiasales, Nissan:nissansales, createdBy: Meteor.userId()});
	},
});

I’ve never used Handsontable, so I’ll just do what I think you’re trying to accomplish in a more meteor way using an old-fashioned html table, because that will be more clear.

<template name="Table">
<table>
	<tr>
		<td>Year</td>
		<td>Kia</td>
		<td>Nissan</td>
	</tr>
	{{#each getData}}
	<tr>
		<td>{{Year}}</td>
		<td>{{Kia}}</td>
		<td>{{Nissan}}</td>
	</tr>
	{{/each}}
</table>
</template>

And then to get the data into that {{#each }}, we just need a helper that returns a cursor. You’re using .fetch() in your helper, which takes a cursor and grabs all of the records. That’s unnecessary when you’re doing things the meteor way.

Template.Table.helpers({
    'getData': function() { 
        return VehicleSales.find();
    }
});

Each iteration of {{#each getData}} is one document from the collection, so you can refer to the fields by their keys directly. That’s why we can just put {{Year}}, {{Kia}}, and {{Nissan}} right into the HTML.

For what you’re trying to do, though, I think the only thing you’re missing is just the createdBy field in your insert().