Data not showing in simple meteor template

Question

Could someone explain to me why my mock data is not showing in this simple meteor app? Any help is greatly appreciated. I am baffled because this should be really simple.

Client/Main.js

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';

var accountData = [
  {
    currency: 'USD',
    available: '3',
    balance: '1',
    hold: '0',
  },
  ...
];

Template.accounts.helpers({
  account: accountData
});

client/Main.html

<template name="accounts">
  <h3> Accounts</h3>
  <div class="table-responsive">
    <table class="table">
      <tr>
        <th> Currency </th>
        <th> Balance </th>
        <th> Available </th>
        <th> On Hold </th>
     </tr>
     {{#each account in accounts}}
       <tr>
         <td> {{account.currency}} </td>
         <td> {{account.available}}</td>
         <td> {{account.balance}}</td>
         <td> {{account.hold}} </td>
       </tr>
     {{/each}}
    </table>
  </div>
</template>

Answer 1

Your template helpers should be functions that return something, not just objects or arrays. Also, you have defined a helper with the name account but are calling a helper named accounts. Try this:

Template.accounts.helpers({
  accounts: () => accountData
});