December 10, 2018

How to update Sub Query data in Lightning Component JavaScript Controller?

In the below example, I have updated the contact name to 'Testing'.

Sample code:

Lightning component:


  1. <aura:component implements = "force:appHostable"  
  2.                 controller = "AccountListController">    
  3.       
  4.     <aura:attribute type = "object[]" name = "acctList"/>    
  5.       
  6.     <aura:handler name = "init" value = "{!this}" action = "{!c.onInit}"/>  
  7.       
  8.     <div class = "slds-box slds-theme_default">   
  9.   
  10.         <aura:iteration items = "{! v.acctList }" var = "acc">   
  11.               
  12.             Account Name - {! acc.Name }<br/>  
  13.               
  14.             <aura:iteration items = "{! acc.Contacts }" var = "con">   
  15.                   
  16.                 Contact Name - {! con.Name }<br/>  
  17.                   
  18.             </aura:iteration>  
  19.               
  20.         </aura:iteration>  
  21.           
  22.     </div>  
  23.         
  24. </aura:component>  

Lightning controller:


  1. ({    
  2.       
  3.     onInit : function( component, event, helper ) {    
  4.           
  5.         var action = component.get( "c.fetchAccts" );    
  6.         action.setCallback(this, function( response ) {      
  7.                 
  8.             var state = response.getState();     
  9.             if ( state === "SUCCESS" )   {    
  10.                     
  11.                 var records = response.getReturnValue();    
  12.                 for ( var i = 0; i < records.length; i++ ) {    
  13.                       
  14.                     if ( records[i].Contacts && records[i].Contacts.length > 0 ) {  
  15.                           
  16.                         var records1 = records[i].Contacts;  
  17.                           
  18.                         for ( var j = 0; j < records1.length; j++ ) {  
  19.                               
  20.                             records1[j].Name = 'Testing';  
  21.                               
  22.                         }  
  23.                           
  24.                     }  
  25.                         
  26.                 }    
  27.                 component.set( "v.acctList", records );       
  28.                     
  29.             }    
  30.                 
  31.         });      
  32.         $A.enqueueAction(action);   
  33.           
  34.     }  
  35.       
  36. })  

Apex Class:


  1. public class AccountListController {    
  2.         
  3.     @AuraEnabled    
  4.     public static List < Account > fetchAccts() {    
  5.             
  6.         return [ SELECT Id, Name, Industry, Type, CreatedDate,  
  7.                         ( SELECT Name FROM Contacts )  
  8.                    FROM Account   
  9.                   LIMIT 100 ];    
  10.             
  11.     }      
  12.         
  13. }  

Output:



No comments:

Post a Comment