Lightning Aura Component Action failed: c:param$controller$doInit [acction is not defined] Failing descriptor: {c:param$controller$doInit}

Question

I am creating a lightning component and the init function is declared in the controller js file.

But I am getting an error stating that "doInit action is not defined".

Here goes the code:

Component file:

<aura:component controller="AccountListSearchController" implements="flexipage:availableForAllPageTypes"> <!--access="global"-->     
<aura:attribute name="lstAccount" type="Account[]"/>     
<aura:attribute name="columnsToDisplay" type="List"/>     <aura:attribute name="searchKeyword" type="String"/>     <aura:attribute name="newMessage" type="String" default="Hello there!"/>          <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>          <h2>{!v.newmessage}</h2>          <lightning:card iconName="standard:account" title="Account List">              <lightning:layout>         <lightning:layoutItem size="3" padding="around-small">             <lightning:input aura:id="searchField"                                  label="Account Name/Email/Phone"                                  value="{!v.searchKeyword}"                                   placeholder="Search Accouts"                                  onchange="searchAccounts"/>             </lightning:layoutItem>         </lightning:layout>                  <lightning:datatable data="{!v.lstAccount}"                              columns="{!v.columnsToDisplay}"                              keyField="Id"                              hideCheckboxColumn="true"/>              </lightning:card> </aura:component>

JS Controller File:

({  doInit : function(component, event, helper) {  helper.fetchAccHelper(null, component);   },          searchAccounts: function(component, event, helper) {         var searchValue = component.find("searchField").get("v.value");         helper.fetchAccHelper(searchValue, component);     } })

JS Helper File:

({  fetchAccHelper : function(searchVal, component) {  component.set("v.columnsToDisplay", [             {label: "Account Name", fieldName: "Name", type: "text"},             {label: "Account Number", fieldName: "AccountNumber", type: "text"},             {label: "Account Owner", fieldName: "OwnerId", type: "text"},             {label: "Phone", fieldName: "Phone", type: "text"}         ]);                  var action = component.get("c.fetchAccount");         acction.setParams({             "searchKeyWord": searchVal         });                  action.setCallback(this, function(response){             var state = response.getState();             if(state == "SUCCESS"){                 component.set("v.lstAccount", response.getReturnValue());             }             else{                 alert("An error occured while fetching the data");             }         });         $A.enqueueAction(action);  } })

Apex Controller file:

public class AccountListSearchController {  @AuraEnabled     public static List<Account> fetchAccount(String searchKeyWord){         List<Account> returnList = new List<Account>();         String searchKey = String.isBlank(searchKeyWord) ? '%%' : '%' + searchKeyWord + '%';                  returnList = [SELECT Name,AccountNumber,OwnerId,Phone FROM Account WHERE Name LIKE :searchKey OR Phone LIKE :searchKey];                   return returnList;     } }

Application file:

<aura:application extends="force:slds">     <c:AccountListSearch newMessage="This is a new mmessage"/> </aura:application>

When the app file is previewed the following error occurs:

This page has an error. You might just need to refresh it. Action failed: c:AccountListSearch$controller$doInit [acction is not defined] Failing descriptor: {c:AccountListSearch$controller$doInit}

Please help. enter image description here

TIA.

Answer 1

But I am getting an error stating that "doInit action is not defined".

No, you're getting "acction is not defined". With double C.

var action = component.get("c.fetchAccount");
acction.setParams({                           // typo
    "searchKeyWord": searchVal
});
action.setCallback(this, function(response){

It's pretty easy when you see it like that, there's no such variable "acction".

You have more typos there. JavaScript is case-sensitive so you need to make up your mind whether the text variable is "newMessage" or "newmessage" too, you'll get access errors.