[SalesForce] To compare old and new value inside aura:iteration in Lightning component

In Lightning I have a requirement where I will iterate a List and display it as a table.While iterating I need to compare old value(last iterated row value) and new value (value in current iteration) of a field in that list and based on this comparison, i have to add styling to that. Could anyone please let me know how to compare old value and new value inside aura:iteration?

**Here instead of apex:variable I need to use some other tag supported in lightning

 <apex:variable var="oldItemStatus" value="" />
 <aura:iteration items="{!v.itemsList}" var="value">
 <apex:variable var="newItemStatus" value="!value.Status__c" />

 <td class="{!If(newItemStatus!= oldItemStatus&& oldItemStatus != '','addCSSClass',''"> </td>
 <td></td>
 <td></td>

 <apex:variable var="oldItemStatus" value="{!value.Status__c}" />
 </aura:iteration>

Best Answer

Not exactly using apex: variable , but something similar.

Why not add an extra attribute in your array items to store old values? by that way you can compare it every time. Its in JS so your serverside controller will be same.

<aura:application extends="force:slds" controller="ContactController">
    <aura:attribute name="contacts" type="Contact[]"></aura:attribute>
    <aura:handler name="init" action="{!c.doInit}" value="{!this}" />

    <table style="width:100%">
        <tr>
            <th>Name</th>
            <th>Id</th> 

        </tr>
        <aura:iteration items="{!v.contacts}" var="con">
             <tr>
                 <td style="{!con.Name!=con.oldName?'color: red;':''}"> <lightning:input type="text" value="{!con.Name}"/> 
                 </td>

                  <td> {!con.Id} 
                 </td>
            </tr>    

        </aura:iteration>
    </table>
</aura:application>

JS code:

({
    doInit : function(component, event, helper) {
        //Call APex
        var action = component.get("c.getContacts");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                let contactList = response.getReturnValue();
                for(var i = 0 ; i < contactList.length ; i++){
                    let con = contactList[i];
                    con.oldName = con.Name; //Populating oldName for comparision 
                }
                component.set("v.contacts", contactList);
            }

        });


        $A.enqueueAction(action);


    }
})

As you can see, I am adding oldName in JS for my contact, so that i can directly compare in markup using {!con.Name!=con.oldName?'color: red;':''}

enter image description here

You can do something similar to get job done.

Related Topic