Apex Code Development You need to sign in to do that
Don't have an account?
Chetan 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
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
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
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
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
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
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
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.
In your AccountMap controller code pasted above you need to fix the misspelling of acccounts with 3 C's.
var account = acccounts[i];
If you're still stuck, you might want to check this page: Trailhead Account Geolocation Project error (https://developer.salesforce.com/forums?id=906F0000000ML3JIAW)