javascriptlightningaura.js

aura:if is not evaluating and aura:iteration not displaying

I have a Lightning component that listens for an Updated Account event and retrieves the associated Contacts and Users. It then displays which Account the Contacts are for with a total of Contacts and Users, and creates an SLDS Card with repeating Tiles.

It was working fine until I changed the header to say 'Loading' while the Contacts were loading. I added two new Attributes (one to hold the loading status and one to hold the total of Contacts and Users) and added the logic to update these attributes. Somehow this broke it, and I can't figure out how it's breaking.

According to the console and debug logs, everything is fine. The Contacts and Users are being retrieved properly from the Apex Controller, and these values are being written to the Attributes. Nothing is being updated, however.

ContactTable.cmp

<header class="slds-media slds-media--center slds-has-flexi-truncate">
    <div class="slds-media__body">
        <h2>
            <span class="slds-text-heading--large">
                <aura:if istrue="{!v.accountName}">
                    Contacts For {!v.accountName}: {!v.contactsLoadingStatus}
                    <aura:set attribute="else">
                        Contacts: - Please Select a Clinic -
                    </aura:set>
                </aura:if>
            </span>
        </h2>
    </div>
</header>

.........
(Contacts Tile Iterator)
.........

<aura:if istrue="{!v.contacts.length > 0}">
    <h2 style="padding-left: 1.5rem;"><span class="slds-text-heading--medium">Contacts</span></h2>
    <div class="slds-card__body--inner slds-grid slds-wrap" style="margin-bottom: 30px; height: 20rem;        overflow: auto; border: 1px solid rgba(128, 128, 128, 0.32); border-radius: 10px;">
        <aura:iteration items="{!v.contacts}" var="singleContact">
            <c:ContactTableContactCard singlecontact="{!singleContact}" />
        </aura:iteration>
    </div>
</aura:if>

ContactTableController.js

handleUpdateAccountEvent: function(component, event, helper){		
  helper.updateAccount(component, event);
  component.set('v.selectedContacts', null);
  component.set('v.total', 0);

  console.log('Account ID: ' + component.get('v.accountID'));
  console.log('Account Name: ' + component.get('v.accountName'));

  if(component.get('v.accountID')){
    console.log('Grabbing contacts and team members');
    component.set('v.contactsLoadingStatus', 'Loading...');
    helper.setContacts(component, helper);
    helper.setTeamMembers(component, helper);		
  }
  else{
    component.set('v.contacts', null);
    component.set('v.teamMembers', null);
  }
},

ContactTableHelper.js

setContacts: function (component, helper) {
  var action = component.get("c.getContacts");
  var accountID = component.get("v.accountID");
  action.setParams({'accountId':accountID});

  action.setCallback(this, function(response){
    if(component.isValid()){
      var state = response.getState();
      if(state === 'SUCCESS'){
        var contacts = response.getReturnValue();
        component.set("v.contacts", contacts);

        var total = component.get("v.total");
        total += contacts.length;
        component.set("v.total", total);

        component.set("v.contactsLoadingStatus", total + " Records");

        contacts = component.get('v.contacts');
        console.log('Grabbing contacts.... Done');
        console.log('contacts:');
        console.log(contacts);

      }
      else{
        console.log('There was an issue in retrieving the contacts.');
        console.log(state);
        if(state === 'ERROR'){
          var errors = response.getError;
          for(var i = 0; i < errors.length; i++){
            console.log(errors[i].message);
          }
        }
      }
    }
  });

  $A.enqueueAction(action);
  console.log('Grabbing contacts....');
},

updateAccount: function(component, event){
  var accountID = event.getParam("accountID");
  component.set("v.accountID", accountID);

  var accountName = event.getParam("accountName");
  component.set("v.accountName", accountName);
  console.log('finished updateAccount');
},

I left out setTeamMembers because it is the same, more or less, as setContacts.

Relevant Console log:

finished updateAccount

Account ID: 001F0000013YX5DIAW

Account Name: ~NAME~.

Grabbing contacts and team members

Grabbing contacts....

Grabbing team members....

Grabbing contacts.... Done

contacts:

[Object, Object, Object]

Grabbing team members.... Done

teamMembers:

[Object, Object, Object, Object, Object, Object]

Solution

  • I figured it out. I used my IDE's code formatter which changed

    <aura:if isTrue="">

    to

    <aura:if istrue="">

    So if anyone else runs into this issue, check your spelling.