Search code examples
mongodbmeteorspacebars

How can I use {{#each}} to show many nested objects in Meteor?


Using the below MongoDB subdocument how can I use the {{#each}} block helper (or really any method) to iterate over the objects inside of recurring?

"recurring": {
    "T12345" : {
        "amount" : 102,
        "created_at" : "2014-09-29T17:43:18.414627+00:00",
        "status": "pending",
        "guid" : "T12345"
    },
    "T12346" : {
        "amount" : 102,
        "created_at" : "2014-09-30T17:45:02.768939+00:00",
        "status": "succeeded",
        "guid" : "T12346",

    }
}

JS file

Template.subscription.helpers({
subscription: function () {
    return this.recurring.transactions; //The subscription filters out the records marked viewable: false
},
    fname: function() {
        return this.customer.fname;
    },
    lname: function() {
        return this.customer.lname;
    },
    amount: function() {
        return this.debit.amount / 100;
    },
    trans_guid: function(key) {
        return this.recurring.transactions.key; //not sure how I can get the guid since the object that holds this property is named using the same guid
    }
});

HTML File

<table class="table bootstrap-datatable datatable small-font">
<thead>
    <tr>
        <th>Status</th>
        <th>Date</th>
        <th>Fund</th>
        <th>Amount</th>
        <th>Number</th>
    </tr>
</thead>   
<tbody>
    {{#each subscription}}
        <tr>
            <td><span class="label label-success">{{status}}</span></td>
            <td>{{trans_date}}</td>
            <td>{{fund}}</td>
            <td>{{amount}}</td>
            <td><b>{{trans_guid}}</b></td>
        </tr>                       
    {{/each}}                                                                               
</tbody>
</table>

Here is a link to a larger part of my MongoDB document https://gist.github.com/c316/20d82003e61aefd3623e

What I'm trying to do is show all the transactions for this one subscription. There may only be one or there many be hundreds. Right now the Meteor is subscribing to the whole document so how do I tell meteor where to look to list each of the transactions?

EDIT ANSWER

HTML file

{{#each addKeys subscription}}
    {{#with values}}
        <tr id="{{trans_guid}}" class="trans-table-row">
            <td><span class="label label-success">{{status}}</span></td> <!-- label-warning label-info label-danger label-success  -->
            <td>{{trans_date}}</td>
            <td>{{fund ../..}}</td>
            <td>{{amount}}</td>
            <td><b>{{trans_guid}}</b></td>
        </tr>
    {{/with}}                       
{{/each}}   

JS file

Template.subscription.helpers({
    values: function() {
        return this;
    },
    status: function() {
        return this.value.status;
    },
    fund: function(parentContext) {
        return parentContext.debit.donateTo;//getDonateTo();
    },
    trans_date: function() {
        return moment(this.value.updated_at).format("MM-DD-YYYY hh:mma");
    },
    amount: function() {
        return "$" + (Math.floor(this.value.amount) / 100).toFixed(2);
    },
    trans_guid: function() {
        return this.value.guid;
    }
});
Template.registerHelper('addKeys', function (all) {
    return _.map(all, function(i, k) {
        return {key: k, value: i};
    });
});

Solution

  • JS:

    Template.registerHelper('addKeys', function (all) {
        return _.map(all, function(i, k) {
            return {key: k, value: i};
        });
    });
    

    HTML:

    <tbody>
        {{#each addKeys subscription}}
          {{#with value}}
            <tr>
                <td><span class="label label-success">{{status}}</span></td>
                <td>{{trans_date}}</td>
                <td>{{fund}}</td>
                <td>{{amount}}</td>
                <td><b>{{trans_guid}}</b></td>
            </tr>
          {{/with}}                 
        {{/each}}                                                                               
    </tbody>