+ Start a Discussion
Chetan KapaniaChetan Kapania 

Action failed: c:AccountMap$controller$accountsLoaded [Cannot read property 'length' of undefined]

Getting error message while trying to complete Trailhead challenge

Action failed: c:AccountMap$controller$accountsLoaded [Cannot read property 'length' of undefined]
Callback failed: apex://AccountController/ACTION$findAll
Failing descriptor: {c:AccountMap$controller$accountsLoaded}

Also when trying to save the challenge error message:
The AccountMap component does not handle the 'AccountSelected' event.

Need Assistance
Best Answer chosen by Chetan Kapania
Rick UptonRick Upton
Hi Chetan,

In your AccountMap controller code pasted above you need to fix the misspelling of acccounts with 3 C's.

 var account = acccounts[i];

All Answers

Alain CabonAlain Cabon
Could you post your code?
Chetan KapaniaChetan Kapania
Hi Alain Cabon,
 
Complete code from AccountMapController.js :

({
    jsLoaded : function(component, event, helper) {
        var map = L.map('map',{zoomControl: false}).setView([37.784173, -122.401557], 14);
        L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
            {
                attribution: 'Tiles © Esri'
            }).addTo(map);
        component.set("v.map",map);
      },
        
    accountsLoaded: function(component, event, helper) {
        //Add Markers
        var map = component.get('v.map');
        var accounts = event.getParam('accounts');
        for(var i=0; i<account.length; i++) {
            var account = acccounts[i];
            var latLng = [account.Location__Latitude__s, account.Location__Longitude__s];
            L.marker(latLng, {account: account}).addTo(map).on('click',function(event){helper.navigateToDetailsView(event.target.options.account.Id);});
        }
    },
    
    accountSelected: function(component,event,helper) {
        //Center the map on the account selected in the list
        var map = component.get('v.map');
        var account = event.getParam("account");
        map.panTo([account.Location__Latitude__s, account.Location__Longitude__s]);
    }
})

Complete code for Account Map Component :

<aura:component >

    <aura:attribute name="map" type="Object"/>
    <aura:handler event="c:AccountsLoaded" action="{!c.accountsLoaded}"/>
    <aura:handler event="c.AccountSelected" action="{!c.accountSelected}"/>
    <ltng:require styles="/resource/leaflet/leaflet2.css"
                  scripts="/resource/leaflet/leaflet2.js"
                  afterScriptsLoaded="{!c.jsLoaded}"/>
    
    <div id="map"></div>
</aura:component>

Also marker is not showing on the map inspite all the coding being done as according to Trailhead. 

If any other code is required please let me know. 

Regards
Chetan Kapania



 
Alain CabonAlain Cabon
Hi,

It is just a little typo

    var accounts = event.getParam('accounts');
    for(var i=0; i<account.length; i++) {

It lacks a "s".

    var accounts = event.getParam('accounts');
    for(var i=0; i<accounts.length; i++) {

https://developer.salesforce.com/forums/?id=906F0000000ML3JIAW

These little typos are often invisible for the writer and quite easy to find for "fresh eyes" but we need the complete code.

Regards
Alain
Chetan KapaniaChetan Kapania
Hi Alain,

Thanks for the response. Your solution worked but now I am getting new error message:

Action failed: c:AccountMap$controller$accountsLoaded [acccounts is not defined]
Callback failed: apex://AccountController/ACTION$findAll
Failing descriptor: {c:AccountMap$controller$accountsLoaded}

I checked the AccountsLoaded event which is as follows:
<aura:event type="APPLICATION">
    <aura:attribute name="accounts" Type="Account[]"/>
</aura:event>

Changed Account to Accounts, but in turn got Internal Server error.

Regards
Chetan
Alain CabonAlain Cabon
Hi,

For each event, you have a component which fires the event and the components which handle the same event.

Verify the component AccountList

AccountMap 
<aura:handler event="c:AccountsLoaded" action="{!c.accountsLoaded}"/>
var accounts = event.getParam('accounts');  // geParam

AccountList
<aura:registerEvent name="accountsLoaded" type="c:AccountsLoaded"/>
 var event = $A.get("e.c:AccountsLoaded");
 event.setParams({"accounts": a.getReturnValue()});    //  setParams  accounts are passed here
 event.fire();    // all the handlers could get the accounts from the event here AccountMap

https://trailhead.salesforce.com/en/projects/account-geolocation-app/steps/lc-app-07
 
Chetan KapaniaChetan Kapania
Hi, 
Here is the AccountMap component:
<aura:component >

    <aura:attribute name="map" type="Object"/>
    <aura:handler event="c:AccountsLoaded" action="{!c.accountsLoaded}"/>
    <aura:handler event="c.AccountSelected" action="{!c.accountSelected}"/>
    <ltng:require styles="/resource/leaflet/leaflet.css"
                  scripts="/resource/leaflet/leaflet.js"
                  afterScriptsLoaded="{!c.jsLoaded}"/>
    
    <div id="map"></div>
</aura:component>

AccountMap controller:
({
    jsLoaded : function(component, event, helper) {
        var map = L.map('map',{zoomControl: false}).setView([37.784173, -122.401557], 14);
        L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
            {
                attribution: 'Tiles © Esri'
            }).addTo(map);
        component.set("v.map",map);
      },
        
    accountsLoaded: function(component, event, helper) {
        //Add Markers
        var map = component.get('v.map');
        var accounts = event.getParam('accounts');
        for(var i=0; i<accounts.length; i++) {
            var account = acccounts[i];
            var latLng = [account.Location__Latitude__s, account.Location__Longitude__s];
            L.marker(latLng, {account: account}).addTo(map).on('click',function(event){helper.navigateToDetailsView(event.target.options.account.Id);});
        }
    },
    
    accountSelected: function(component,event,helper) {
        //Center the map on the account selected in the list
        var map = component.get('v.map');
        var account = event.getParam("account");
        map.panTo([account.Location__Latitude__s, account.Location__Longitude__s]);
    }
})

AccountList Component:
<aura:component controller="AccountController">
    
    <aura:registerEvent name="accountsLoaded" type="c:AccountsLoaded"/>
    
    <aura:attribute name="accounts" type="Account[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <ul>
    <aura:iteration items="{!v.accounts}" var="account">
        <c:AccountListItem account="{!account}"/>
    </aura:iteration>
    </ul>
</aura:component>

AccountList Controller:
({
    doInit : function(component, event) {
        var action = component.get("c.findAll");
        action.setCallback(this, function(a) {component.set("v.accounts", a.getReturnValue());
                                              var event = $A.get("e.c:AccountsLoaded");
                                              event.setParams({"accounts": a.getReturnValue()});
                                              event.fire();
                                             });
        $A.enqueueAction(action);
    }
})

I don't see any issue as everything seems to be what you have mentioned. 
Rick UptonRick Upton
Hi Chetan,

In your AccountMap controller code pasted above you need to fix the misspelling of acccounts with 3 C's.

 var account = acccounts[i];
This was selected as the best answer
Rick UptonRick Upton
Hi Chetan,

If you're still stuck, you might want to check this page: Trailhead Account Geolocation Project error (https://developer.salesforce.com/forums?id=906F0000000ML3JIAW)
Chetan KapaniaChetan Kapania
Hi Rick...  It worked.. Thanks