Accessing data in the controller and app file that is returned from a helper function

Question

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?

Answer 1

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 .