1

I'm curious if it is possible to do functions on data that is bound in an aura:iteration.

For example

<a class="{!e.EndDateTime &lt; v.now ? 'strike' : ''}" href="" data-recId="{!e.Id}" onclick="{!c.goToRecord}">{!e.Subject} — {!e.Sub_Type__c}</a>

This lives in an aura iteration. In this specific example, I need to compare all day events differently. So Ideally e.EndDateTime.addDays(1). Obviously that does not work, but is there a way I can call a function from the markup with parameters to perform calculations.

2 Answers 2

3

I was discussing this with a friend of mine and he suggested to calculate the results that are returned and then add them to the object's json. So I tested this theory out and here is the result that I came back with.

In my callback of the action that is going to the server to retrieve the data:

        action.setCallback(this, function(result) {
            var state = result.getState();
            if(component.isValid() && state === "SUCCESS") {
                console.log('Setting Events');
                var events = result.getReturnValue();
                var compareDate = new Date();
                for(var i = 0; i < events.length; i++)
                {
                    var endDate;                    
                    if(events[i].IsAllDayEvent)
                        endDate = this.addDays(events[i].EndDateTime, 1).valueOf();
                    else
                        endDate = events[i].EndDateTime.valueOf();

                    var compare = compareDate.valueOf();
                    if(endDate < compare)
                        events[i].pastDue = true;
                    else
                        events[i].pastDue = false;
                }
                component.set("v.Events", events);
                this.renderPage(component);
            }
            this.toggle(component, event);
        });

The important bits being:

if(endDate < compare)
     events[i].pastDue = true;
else
     events[i].pastDue = false;

Then, in my component I can directly use the new pastDue attribute that I appended onto my events attribute

<a class="{!e.pastDue ? 'strike' : ''}" href="" data-recId="{!e.Id}" onclick="{!c.goToRecord}">{!e.Subject}</a>
1

There are a few operators you can use, but mostly limited to basic math, string concatenation, and branching logic. If you want to calculate values, you'll need to do so in your controller/helper methods.

4
  • Yeah, I looked at those before when I was searching and didn't fit my need. How do you calculate the values in the aura iteration in your controller? In the callback method?
    – JRiffe
    Aug 15, 2017 at 19:24
  • 1
    @JRiffe Yes, you'll need to use code in your controller within the callback function to massage the data as you need it. I realize this is quite a bit more restrictive than Visualforce, but unfortunately, it's all we have to work with (at least for now?).
    – sfdcfox
    Aug 15, 2017 at 19:30
  • 1
    A friend and I were discussing this issue and he made the suggestion to append the calculated value to the json of the returned object. I haven't tried this yet, but I think it sounds like a pretty fantastic idea.
    – JRiffe
    Aug 15, 2017 at 19:33
  • I feel like if you need to do a lot of data manipulation with what is returned in the callback, code just looks like a spaghetti explosion.. but then again, my javascript is only mediocre at best. ha
    – JRiffe
    Aug 15, 2017 at 21:29

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .