2

Background

I am using a helper function to return data from an apex class. I need to access that data in the component and the controller.

When I return the data in the helper I can console.log it but it does not appear till shortly after the page loads.

In the controller I try and console.log the data and it outputs before the helper is complete. Because of this the output shows null.

Helper

({
  loadData: function(component, event, helper) {
    var action = component.get("c.loadSalesRepView");

    action.setCallback(this, function(response) {
     var state = response.getState();
     if (component.isValid() && state == "SUCCESS") {

        var dp = JSON.parse(response.getReturnValue());

        component.set("v.district_plan", dp);

      } else if (response.getState() === "ERROR") {

        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
        "type":"error",
        "title": "Error!",
        "message": "Internal Server Error"
        });
        toastEvent.fire();
      }
    });

    $A.enqueueAction(action);
  }
});

Controller

 doInit: function(component, event, helper) {
    helper.loadData(component, event, helper);
    var data = component.get("v.district_plan");

   // This is null
   console.log(data); 
 }

Component Html

<aura:attribute name="district_plan" type="Map" />

<aura:iteration items="{!v.district_plan.goal_themes_md}" var="row" indexVar="index">  
    option value="{!row.Id}">{!row.description}</option>
   </aura:iteration>

Question

How do I access the values from the helper in the html and the controller?

4

You will need to understand that Javascript is not sequential like apex methods where the statement blocks generally decides what logic to execute and its sequence .

You will need to spend some time to familiarize with the concept of Callbacks in Javascript

Here is another good reference of what is a callback

Now you can pass the callback to the helper from controller which for practical purposes you don't need , because the helper can set the attribute and then you can access the attribute in your component view .

However if you want to pass values from helper to controller create a callback as below

doInit: function(component, event, helper) {
          helper.loadData(component, event, helper,function(){
          alert('Called in controller: ' + component.get("v.Name"));
          var data = component.get("v.district_plan");
          console.log(data); 
     }); 
 }

And your helper code

{
 loadData: function(component, event, helper,callback) {
   var action = component.get("c.loadSalesRepView");
   action.setCallback(this, function(response) {
   var state = response.getState();
   if(component.isValid() && state == "SUCCESS") {
      var dp = JSON.parse(response.getReturnValue());
      component.set("v.district_plan", dp);
      if(callback){
          callback();
      }
   }else if (response.getState() === "ERROR") {
       var toastEvent = $A.get("e.force:showToast");
       toastEvent.setParams({
        "type":"error",
        "title": "Error!",
        "message": "Internal Server Error"
       });
       toastEvent.fire();
     }
   });
    $A.enqueueAction(action);
  }
});

NOTE : You absolutely dont need to ever execute a function in your JS controller as once you set an attribute , its binded to View layer and you can get the value in view via the value provider .

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.