[SalesForce] aura:if inside aura:iteration

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.

Best Answer

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

Related Solutions

[SalesForce] with

After looking at all the code you sent me, I am pretty sure the problem you are encountering is the same as the one reported here, which appears to be a Framework issue yet to be resolved.

That said, I have a better workaround than the one one suggested in that post. The problem seems to happen when the call returns an empty array such as what would happen for those items marked non-completed. But, it occurred to me that you might want to re-consider how you are getting the data and instead of returning all the data in each doInit and then using the aura:if to only display what you want. Instead you can resolve this (and I verified it worked by the way), by simply changing your code to pass the completed flag to the getWhiteboardItemsDB method in your Apex class and only return the data you actually want.

This would involve changing the code in your Apex Controller to look like the following:

public with sharing class ListWhiteboardItemsApexController {

@AuraEnabled
public static List<Whiteboard_Item__c> getWhiteboardItemsDB(Boolean completed) {
    return [SELECT Id, OwnerId, IsDeleted, Name, CreatedDate, LastModifiedDate, CreatedById, LastModifiedById, SystemModstamp, 
            AssignedTo__c, Completed__c, CompletedBy__c, Completed_Date__c, High_Priority__c, Display__c, Item_Due_Date__c
            FROM Whiteboard_Item__c
           WHERE Completed__c =: completed];
}
 }

And also change the code in the helper function that calls this method to look like the following:

 getWhiteboardItems : function(component) {
    var action = component.get('c.getWhiteboardItemsDB');
    var completed = component.get('v.completed');
    action.setParams({ "completed" : completed});
    action.setCallback(this, function(response) {
        var state = response.getState();
        if(component.isValid() && state == "SUCCESS") {
            component.set("v.whiteboardItems", response.getReturnValue());
        }
    });
    $A.enqueueAction(action);
}

You can then leave your code in the ListItems component with the aura:if and it should work without getting the error.

Please let me know if you think this would work and if so, mark this as the answer so it can possibly help other people.

[SalesForce] Handler change not working with attribute updated inside aura:iteration

I was facing a similar issue and I found a workaround for this.

Parent component

<aura:component>
   <aura:attribute name="lstAddresses" type="Address__c[]" access="global"/>
   <aura:handler name="change" value="{!v.lstAddresses}" action="{!c.itemsChange}"/>
   <aura:if isTrue="{!v.showAddAddress}">
         <c:AddEditAddress myObject="{'sobjectType': 'Address__c'}" lstAddresses="{!v.lstAddresses}"  />
      </aura:if>
</aura:component>

Child component

<aura:component>
   <aura:attribute name="lstAddresses" type="Address__c[]" access="global"/>
</aura:component>

Here I have just cut short the code, which is sufficient enough to clear the doubt So Here in the controller js of child component I was adding a address object in the list aura attribute, but the handler for lstAddresses change event was not firing, inshort some how the bidirectional binding was not working as expected

I just updated my code section little bit where I was performing push on the list like this

var lstAddresses = JSON.parse(JSON.stringify(component.get("v.lstAddresses")));
lstAddresses.push(addressObj);
component.set("v.lstAddresses",lstAddresses);

I found that now the change event handler of parent component gets called in init as well as on pushing a new address record from child component. So may be it is the case that in case of collection we have to use this way. Let me know if that worked for you