Call multiple helper methods as order in lightning controller

  • doInit : function(component, event, helper) {
        helper.method1(component);
        helper.method2(component);
        helper.method3(component);
    }
    

    Need to call these helper methods in lightning client side controller synchronously.

    Component markup:

    Here's my code:

    <aura:component controller="EmpAttachmentListController"> 
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> 
    <aura:attribute name="empList1" type="Employee__c[]" /> 
    <aura:attribute name="empList2" type="Employee__c[]" /> 
    <table>
        <tr>
            <th>Employee Name</th>
            <th>Imgs Count</th> 
        </tr>
        <aura:iteration indexVar="index" var="emp" items="{!v.empList1}"> 
            <tr>
                <td>{!emp.Employee_Name__c}</td>
                <td>
                    {!emp.Attachments.le‌ngth} Imgs <a href="#" onclick="{!c.toggleRecord}" id="{!index}">show/hide</a>
                </td>
            </tr>
            <tr>
                <td>
                    <p id="{!'index'+index}" class="showP">
                    <aura:iteration var="attach" items="{!emp.Attachments}"> 
                        <img src="{!'/servlet/servlet.FileDownload?file='+attach.Id}" /> 
                    </aura:iteration>
                    </p>
                </td> 
            </tr>
        </aura:iteration>
    </table>
    </aura:component>
    

    controller.js

    ({ doInit : function(component, event, helper) 
        { 
            helper.getEmpList(component); 
        }
    });
    

    helper.js

    ({ 
        getEmpList: function(component) { 
            var that = this; 
            var action = component.get("c.getEmpList"); 
            action.setCallback(that, function(result) { 
                component.set("v.empList", result.getReturnValue());
                that.getEmpList2(component); 
            }); 
            $A.enqueueAction(action);
        }, 
        getEmpList2: function(component) { 
            var that = this; 
            var action = component.get("c.getEmpList2"); 
            action.setCallback(that, function(result) {
                var c = component.find("index0"); ** //Getting undefined error here ** 
                component.set("v.empList2", result.getReturnValue()); 
            }); 
            $A.enqueueAction(action); 
        } 
    })
    

    you can call them synchronously like above. do they have any code to invoke controller method?

  • Praveen

    Praveen Correct answer

    5 years ago

    If there's no code in the helper method to invoke apex controller method(@auraenabled), you can call the methods one by one, since they are executed synchronously.

    controller.js

    doInit:function(component){
        helper.method1(component);
        helper.method2(component);
        helper.method3(component);
    }
    

    helper.js

    ({
        method1:function(cmp){
            // do some stuff
        },
        method2:function(cmp){
            // do some stuff
        },
        method3:function(cmp){
            // do some stuff
        }
    })
    

    But if you have to invoke @auraenabled method in the helper method, then you need to chain the methods because @auraenabled callbacks are asynchronous:

    controller.js

    doInit:function(component){
        helper.method1(component);
    }
    

    helper.js

    ({
        method1:function(cmp){
            var action = cmp.get("c.callingMethod1");
            var self = this;
            action.setCallback(this,function(resp){
                // do some stuff and call method2
                self.method2(cmp);
            });
    
            $A.enqeueAction(action);
        },
        method2:function(cmp){
            var action = cmp.get("c.callingMethod2");
            var self = this;
            action.setCallback(this,function(resp){
                // do some stuff and call method2
                self.method3(cmp);
            });
    
            $A.enqeueAction(action);
        },
        method3:function(cmp){
            var action = cmp.get("c.callingMethod3");
            var self = this;
            action.setCallback(this,function(resp){
                // do some stuff
            });
    
            $A.enqeueAction(action);
        }
    })
    

    Then chain methods in the actions callback as described in the above answer

    @Ajay component.find() can take only aura:id not html id attribute.Join this room to discuss about it.

    I have modify them as aura:id still getting undefined error. And chat is not enabled for me.

    you cannot dynamically set aura:id as you do in for html id attribute inside aura:iteration.can you check the chat now?

    As I have no reputation. I am unable to chat you.

    so your use case is that,display some employees and clicking on the show/hide you are trying to query the attachments(only images) under the employee and display it.Am I right?

    I am able to display even images by clicking show/hide, but my case is what will happen if I am call another apex method2 in helper1 and trying to get front end attributes??

    apart from this line : `var c = component.find("index0");` rest of your code is fine.why do you want to call the above line?.As I said earlier, chain the next method2 in the callback of action method1 will work fine.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM