0

I want to conditionally render each item in an iterating list. It has to check if each contact in the iterating list is included/contains in another list of contacts. How should I approach ?

Component

<aura:component access="global">
  <aura:attribute name="contactList" type="Object[]"/>
  <aura:attribute name="wspContactIds" type="String[]"/>
  <aura:attribute name="evaluated" type="Boolean" default="false"/>

   <aura:iteration var="ctct" items="{!v.contactList}">
        <div class="slds-media__body">
           {!ctct.Contact.FirstName}                
        </div>
        <div class="slds-no-flex">   
           <button id="{!'reEvaluate'+ ctct.Id}" class="{!v.evaluated ==true ? 'slds-button': 'hide slds-button'}" onclick="{!c.reevaluate}"><b>Re-Evaluate</b> </button> 
           <button id="{!'evaluate'+ ctct.Id}" class="{!v.evaluated ==true ? 'hide slds-button': ' slds-button'}" onclick="{!c.evaluate}"><b>Evaluate</b> </button>         
        </div>

   </aura:iteration>
</aura:component>

Controller

 doInit : function(component,event,helper){
   var secondContactList= component.get("v.wspContact");
   var firstContactList = component.get("v.contactList");
   for(var i=0; i<firstContactList .length;i++){
       for(var j=0; j<secondContactList.length;j++){
           if(firstContactList[i].Id == secondContactList[j].Id){ 
             component.set("v.contactEvaluated",true);
           }
           else{
            component.set("v.contactEvaluated",false);
           }

       }
   }

},

Like shown below, I need to identify the already evaluated contact item and its corresponding button needs to be changed. Iterating List

2
  • 3
    You could build the final list in your component controller and use that in your iteration.
    – Eric
    Sep 2, 2017 at 18:09
  • 1
    As of now, these are the only supported functions in an aura expression ( developer.salesforce.com/docs/atlas.en-us.lightning.meta/… ) and doing a .contains() kind of check is not possible in an expression in this release. Hence as Eric suggested you should do the check in your controller. That being said, it would be the best way, conditional rendering using aura:if has performance cost when the list you are iterating is too large.
    – Sumuga
    Sep 2, 2017 at 18:23

1 Answer 1

0

Are you trying to run the list only for the Contact Ids which are included in the list.

You can include them in the list by creating null check in the apex controller. Or you can check them in the Javascript controller. Suppose lets assume that you are trying to return a Wrapper list. Forgive me for my syntax. this is just a code snippet. Use as per your convenience.

Consider,

public class Sample(){
    @AuraEnabled
    global static string getWrapperValues(){
        List<ContactWrap> wrapList = new list<ContactWrap>();

        for(Contact c : your list){ // run your contactlist
        ContactWrap cw = new ContactWrap();
        cw.theContact = c;
        wrapList.add(cw);
        }
    }
    return JSON.serialize(wrapList);
}
public list ContactWrap{
    @AuraEnabled
    public Contact theContact {get;set;}
}

js Controller :

({  
    doInit : function(Component){
        var action = component.get("c.getWrapperValues");

        // set your params for action if any 

        action.setCallBack(this,function(response){
            var output = response.getReturnValue();
            var wrapper = JSON.parse(output);
            for(var i=0;i<wrapper.length;i++){
                var arrVar = wrapper[i];
                console.log('ID**'+arrVar.theContact.Id);
                if(arrVar.theContact.Id){
                    // set your list 
                    component.set("v.yourListAttributeName",wrapper);
                }
                else{
                    // show custom errors
                }
            }
        });
        $A.enqueueAction(action);
    }
})
7
  • Not just to run only for the ones in the second list. If an item in the first list is part of the second list, then I want to add (for example) a button next to that item. And if another item is not part of the second list, then hide the button.
    – Brav
    Sep 3, 2017 at 4:34
  • In the first list u get ur contact Ids. Get a map of first list Ids and its Object and compare with second list as a Js variable and iterate through it and Add a Boolean flag as True . Based on true or false show or hide button.
    – AjaySFDC
    Sep 3, 2017 at 8:33
  • Thanks but since I am calling the aura:if inside the aura:iteration, how will the boolean change for each iterating of the first contact list ? I modified the code. I know its wrong but is the logic you are trying to convey similar to what i've written?
    – Brav
    Sep 3, 2017 at 9:07
  • I was asking you to set the value as true or false in ur JS Controller. All that logic and both list comparison values check you do in your JS controller . Tell me ur requirement clearly i will give you ideas to construct your logic.
    – AjaySFDC
    Sep 3, 2017 at 18:31
  • Okay.. The requirement is to identify the items in the first ContactList (stored in the standard object 'Opprtunitycontactroles') which are already evaluated. If the contact item is evaluated, I want to display "Re Evaluate" button, otherwise show "Evaluate button." I have put a screenshot. The list of evaluated (Second contact list) contacts is stored in another custom object 'wspRecord'. I retrieved them and want to compare it with each iterating contact List. Hope its clear now
    – Brav
    Sep 3, 2017 at 19:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.