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

Improve this question
2
  • 3
    You could build the final list in your component controller and use that in your iteration. Commented 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. Commented Sep 2, 2017 at 18:23

1 Answer 1

Reset to default
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); } })
Improve this answer
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. Commented 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. Commented 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? Commented 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. Commented 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 Commented Sep 3, 2017 at 19:04

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.