How can I reverse the ordering of spacebars #each block

Question

A helper sentencesList is an array of objects containing an element text.

HTML:

{{#each sentencesList}}
  {{text}}
{{/each}}

CLIENT.JS

sentencesList: function() {
    return Session.get(SENTENCES)
}

How can I reverse the ordering, i.e the highest index number is shows at the top and the element at index position 0 is at the bottom?

Answer 1

You could just reverse the array:

sentencesList: function() {
    return Session.get(SENTENCES).reverse();
}

Please note: although {{#each}} works on both arrays and cursors, this method is array-specific. So you cannot use it, say, on the return of a Collection.find() call. To achieve this with a collection, you will have to use sort on the key you want to reverse order from.

Answer 2

If you want to reverse more than one array, you could create a generic helper in (say) main.js:

Template.registerHelper('reverseArray', (array) => array.reverse());

In your template:

{{#each (reverseArray sentencesList)}}
  {{text}}
{{/each}}

EDIT: Updated code to include parentheses as per Pierre's comment