Dynamically calculate values in Aura Iteration

Question

I've aura iteration in my Aura Component where I have a start date and End date and I want to calculate the difference between Start and End date for each row in Aura iteration.

What options I have for that? I want to know my options to calculate the time difference between start time and end time in each row.

Child Component:

<aura:component >
    <aura:attribute name="isReadOnly" type="boolean" default="false"/>
    
    <aura:attribute name="durationProgram" type="Custom_Data__c" />
    
    <aura:attribute name="rowIndex" type="String"/>
    
    <!-- Register 2 Lightning Event for handle add or Delete rows on Parent Component  --> 
    <aura:registerEvent name="DeleteRowEvt" type="c:DeleteRowEvt"/> 
    <aura:registerEvent name="AddRowEvt" type="c:AddNewRowEvt"/> 
    
    <tr>
        <td class="slds-col slds-size_1-of-12">
            {!v.rowIndex + 1}
        </td>
        <td class="slds-col slds-size_2-of-12">
            <lightning:input type="time"  name="Start_Time" value="{!v.durationProgram.Start_Time__c}" readonly="{!v.isReadOnly}"/>  
        </td>
        <td class="slds-col slds-size_2-of-12">
            <lightning:input type="time" name="End_Time" value="{!v.durationProgram.End_Time__c}" readonly="{!v.isReadOnly}"/>
        </td>
        <td class="slds-col slds-size_2-of-12">
            {!v.durationProgram.End_Time__c} - {!v.durationProgram.Start_Time__c}
        </td>
        <td>
            <aura:if isTrue="{!v.rowIndex == 0}">
                <a onclick="{!c.AddNewRow}">
                    <lightning:icon iconName="utility:add" class="slds-icon slds-icon_small" size="small" alternativeText="add"/>
                    <span class="slds-assistive-text">Add Icon</span>
                </a>    
                <aura:set attribute="else">
                    <a onclick="{!c.removeRow}">
                        <lightning:icon variant="error" iconName="utility:delete" class="slds-icon slds-icon_small" size="small" alternativeText="icon"/>
                        <span class="slds-assistive-text">Delete Icon</span>
                    </a>
                </aura:set> 
            </aura:if>
        </td> 
    </tr>
</aura:component>

Child Controller:

({
    AddNewRow : function(component, event, helper){
       // fire the AddNewRowEvt Lightning Event 
        component.getEvent("AddRowEvt").fire();     
    },
    
    removeRow : function(component, event, helper){
     // fire the DeleteRowEvt Lightning Event and pass the deleted Row Index to Event parameter/attribute
       component.getEvent("DeleteRowEvt").setParams({"indexVar" : component.get("v.rowIndex") }).fire();
    },
})

Parent Component:

<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
            <thead>
                <tr>
                    <td class="slds-col slds-size_1-of-12">
                        S. No.
                    </td>
                    <td class="slds-col slds-size_2-of-12">
                        Start Time
                    </td>
                    <td class="slds-col slds-size_2-of-12">
                        End Time
                    </td>
                    <td class="slds-col slds-size_2-of-12">
                        Difference
                    </td>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.Custom_Data_List}" var="item" indexVar="index">
                    <c:ChildComponentTable durationProgram="{!item}" rowIndex="{!index}" isReadOnly="{!v.isReadOnly}"/>
                </aura:iteration> 
            </tbody>
        </table>

Answer 1

I would think in the child component you need to add a new doInit method to calculate this for you, an attribute to hold the value, and update the table to reference the attribute. . I didn't type this in Salesforce to verify so things will need to be changed, but I think this approach should work. I don't believe any changes are needed in the parent component with this solution.

Child component:

Add an attribute for tracking the difference

<aura:attribute name="Difference" type="Double" default="false"/>

Could be integer or Date depending how you want to show it.

doInit Handler:

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

Update table:

<td class="slds-col slds-size_2-of-12">
    {!v.Difference}
</td>

Child Controller: (Add a method for do init)

doInit : function(component, event, helper){
    var durationProgram = component.get("v.durationProgram");
    var StartTime = Start_Time__c;
    var End_Time  = End_Time__c;
    var StartTime = new Date(durationProgram.Start_Time__c), 
    var End_Time = new Date(durationProgram.End_Time__c)
    var days = (End_Time - StartTime ) / 8.64e7; 
    // I used days but you can change it to what matches your needs. 
    component.set("v.Difference", days); 
}