How to pass a parameter to Salesforce Lightning JavaScript controller method

Question

I would like to pass a parameter to a JavaScript controller method so the method could format the data...

Component

<ul>
   <aura:iteration items="{!v.listOfStuff}" var="a">
      <li>{! c.formatFromUntil(a.Start__c, a.End__c) }</li>
   </aura:iteration>
<ul/>

JavaScript Controller

formatFromUntil : function(starts, ends){
   // format the two date like below
   return 'from 3:00 PM until 4:30 PM'
},

But the developer console will not save, and I get this error:

Failed to save exampleComponent.cmp: unexpected token: '(' at column X of experssion: c.formatFromUntil(a.Start__c, a.End__c) : Source

It obviously does not want me accessing controller methods like this.

How should I be approaching this?

Answer 1

You have to calculate the data in your controller/helper:

listOfStuff.forEach(item => 
    item.FromUntil = helper.formatFromUtil(item.Start__c, item.End__c);

Which you then render normally:

  <li>{!a.FromUntil }</li>

If these are actual records that you intend to send back to the server later, you might want a "wrapper" instead:

listOfStuff = sourceList.map(function(item) 
    return { record: record, 
             FromUtil: helper.formatFromUntil(record.Start__c, record.End__c) 
});

You'd need to adjust your markup and any other code that relies on the item structure accordingly.