0

I have a problem calling an Apex Controller from a Lightning Component Helper. I really don't know a way to call the Apex Controller in order to retrieve the data and continue the execution.

I think that the problem is that the call is asynchronous (see function Apex Controller). The rest of the code is executed and my refreshData variable is still undefined until the controller response arrives.

I tried putting the rest of the code into the callback of the action variable but I doesn't work.

My question is: Is there any better way to structure this code so I can call the Apex controller, then show the response?

Here is the important part of my Helper's code:

({
        drawMap: function(component, controllerData) {
            jQuery(function() {
                    jQuery.getJSON('../resource/' + Math.round((new Date()).getTime()) + '/provinciasEspana', function(geojson) {
                            var data = Highcharts.geojson(geojson),
                                small = jQuery('#containerDrilldown').width() < 400;

                            function findByCode(codigo) {
                                var result = jQuery.grep(controllerData, function(e) {
                                    return e.code == codigo
                                });
                                return result[0].value;
                            }

                            jQuery.each(data, function(i) {
                                this.drilldown = this.properties['Code'];
                                this.value = findByCode(this.properties['Code']);
                            });

                            var chartDrilldown = new Highcharts.Map({
                                    chart: {
                                        renderTo: 'containerDrilldown',
                                        events: {
                                            drilldown: function(e) {
                                                jQuery.getJSON('../resource/' + Math.round((new Date()).getTime()) + '/municipiosZaragoza', function(geojson) {
                                                    data = Highcharts.geojson(geojson);

                                                    function callApexController() {

                                                        var action = component.get("c.loadHeatData");
                                                        action.setCallback(this, function(data) {
                                                            console.log(eval(data.getReturnValue()));
                                                            return eval(data.getReturnValue());
                                                        });
                                                        $A.enqueueAction(action);

                                                    }

                                                    var refreshData = callApexController();

                                                    console.log("This is refreshData: ");
                                                    console.log(refreshData);

                                                    function findByMunicipalityCode(codigo) {
                                                        var result = jQuery.grep(refreshData, function(e) {
                                                            return e.code == codigo
                                                        });
                                                        return result[0].value;
                                                    }

                                                    jQuery.each(data, function(i) {
                                                        var returnValue = findByMunicipalityCode(this.properties['Code']);
                                                        if (!returnValue) {
                                                            this.value = 0;
                                                        } else {
                                                            this.value = findByMunicipalityCode(this.properties['Code']);
                                                        }
                                                    });

                                                    chart.addSeriesAsDrilldown(e.point, {
                                                        name: e.point.name,
                                                        data: data,
                                                        dataLabels: {
                                                            enabled: true,
                                                            format: '{point.properties.Name}'
                                                        }
                                                    });
                                                });
                                            }

                                            this.setTitle(null, {
                                                text: e.point.name
                                            });
                                        }
0

I read your code,it's difficult to understand that what you want to do. but as per your question I suggest the way to get out of this problem.

First of make it clear,setCallback method never return any value.

"I think that the problem is that the call is asynchronous (see function Apex Controller). The rest of the code is executed and my refreshData variable is still undefined until the controller response arrives."

You have to set the attributes in setCallback method which you want to fill with the returned value from server side.

Keep in mind that setCallback take its time because response is coming from server side and its time depends on execution of code written in server side controller, and before this all happen the rest of code in that function executes. So that why ,the best way to structure the code is just put your rest of code in setCallback method which depends on the value of returned value from server side.

Thanks

0

Your refreshData var is undefined and will remain so for two reasons:

eval() is blocked in Lightning using locker service.

Server calls are async, so the return value of your function will always be null.

You will see a value if you console log the value inside the callback function of the server call - ie:

callApexController : function(component) {

  var action = component.get("c.loadHeatData");
  //note this needs more error checking
  action.setCallback(this, function(data) {
      console.log("This is refreshData: ");
      console.log(data.getReturnValue());
  });
  $A.enqueueAction(action);
}

I'm not sure how to hook this into your very complicated function, but the call above is what you need.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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