0

I am using this component: https://developer.salesforce.com/docs/component-library/bundle/lightning:map/ and instead of having a hard coded I am trying to grab the billing and shipping addresses from an Account, setting the value in an attribute and then getting the attribute when setting the map markers.

Issue: I am not able to set the attribute in action.setCallback to the value that is being returned by the Apex method.

The console.log (line 10 and 13) in my helper print {Object Object}. The system.debug in my Apex class is returning the right Account so I knows its not issue with my server-side controller.

component:

<aura:component controller="MapApexController" implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global">

<!-- attributes -->
<aura:attribute name="mapMarkers" type="Object"/>
<aura:attribute name="zoomLevel" type="Integer" />

<aura:attribute name="recordId" type="Id"/>

<aura:attribute name="myAccount" type="Account"/>

<!-- handlers-->
<aura:handler name="init" value="{! this }" action="{! c.init }"/>

<!-- the map component -->
<lightning:map 
    mapMarkers="{! v.mapMarkers }" 
    zoomLevel="{!v.zoomLevel}" />

</aura:component>  

controller:

({
    init: function (cmp, event, helper) {

        helper.getAccount(cmp);

        console.log('account: ' + cmp.get('v.myAccount'));

        cmp.set('v.mapMarkers', [
            {
                location: {
                    Street: cmp.get('v.myAccount.BillingStreet'),
                    City: cmp.get('v.myAccountBillingCity'),
                    State: cmp.get('v.myAccount.BillingState')
                },

                title: cmp.get('v.myAccount.Name') + ' \'s Billing Address',
            }, 
        ]);
        cmp.set('v.zoomLevel', 16);
    }

});

helper:

({
    getAccount : function(cmp, event, helper) {

        var action = cmp.get('c.getAccount');

        action.setParams({
            recordId: cmp.get('v.recordId')});

        action.setCallback(this, function(data){
            console.log('data line 10: ' + data.getReturnValue());
            var state = data.getState();
            if (state === 'SUCCESS') {
                console.log('data line 13: ' + data.getReturnValue());
                cmp.set('v.myAccount', data.getReturnValue());
            }
        });

        console.log('BillingCity: ' + cmp.get('v.myAccount'));

        $A.enqueueAction(action);
    }
})

Apex:

public class MapApexController{

    @AuraEnabled
    public static Account getAccount(Id recordId){

        Account acc = [SELECT Name, BillingStreet, BillingState, BillingCity, 
                            ShippingStreet, ShippingState, ShippingCity
                        FROM Account
                        WHERE Id =: recordId];

        system.debug(acc);
        return acc; 
    }
}
0

helper.getAccount is asynchronous. This means that until your init method has finished, myAccount will definitely be a null value, as you haven't had a chance to visit the server yet. You'll need to set mapMarkers after you've had a chance to load the data from the server. You'll want to read about how to Write Asynchronous JavaScript for more information on how you can simplify your code.

  • oh I see. Would it work if added the helper code block to the init in the controller ? before setting mapMarkers – sarthvader Nov 13 at 22:59
  • @sarthvader No, because it would still be asynchronous. The code in setCallback will only run after the current synchronous method call has completed (the init method). You need to set mapMarkers in the setCallback method. – sfdcfox Nov 13 at 23:05
  • okay. I already tried putting the mapMarkers in the setCallback method but it gives this error message: "render threw an error in 'lightning:map' [Cannot read property 'length' of null] " . I will look into the asynchronous JS trailhead above. Thank you ! – sarthvader Nov 13 at 23:15

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.