aura:if inside aura:iteration

Question

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.

Answer 1

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);
    }
})