0

I have a list that is a part of an @AuraEnabled method in my apex controller. I need to use that list with aura:iteration to display each record in the list in its own <section>. It is my understanding that if the list belongs to an @AuraEnabled method that it can be referenced from my component. Right now I am getting an error:

Unable to find action listOfWrappers on the controller of c:WhatsNewList

Component code below:

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="items" type="List"/>
      <aura:iteration items="{!c.listOfWrappers}" var="listOfWrappers" end="10">
        <Aura:if isTrue="{!c.listOfWrappers.Type == community_Event__c}"> 
            <section id="" class="container" onclick="">
                <div class="event-image" style="padding: 16px;"><img style="height: 100%;" src="{!$Resource.CalendarIcon}"/></div> 
                <div class="event-detail">
                <div class="event-title">{!listOfWrappers.Name}</div>
                <div class="event-date">{!listOfWrappers.StartDate__C}</div>
                <div class="event-location">{!listOfWrappers.Location__C}</div>
                <div class="event-products">{!listOfWrappers.Product_Filter__c}</div>
                <div class="event-type">{!listOfWrappers.Event_Type_Filter__c}</div>
        </div>
    </section>
    <aura:set Attribute="else">
    <section id="" class="container" onclick="">
        <div class="event-image" style="padding: 16px;"><img style="height: 100%;" src="{!$Resource.ArticleIcon}"/></div> 
        <div class="event-detail">
            <div class="event-title">{!listOfWrappers.Title}</div>
            <div class="event-description">{!listOfWrappers.Summary}</div>
        </div>
    </section>
  </aura:set>
</Aura:if> 
    </aura:iteration>
</aura:component>

Controller:

({
    doInit : function(component, event, helper) {
        helper.getWrapperList(component);
    }
})

Helper:

({
    getWrapperList : function(component) {
        var action = component.get("c.getWrapperList");

        var self = this;
        action.setCallback(this, function(actionResult){
            var state = actionResult.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.listOfWrappers", actionResult.getReturnValue());
            }
        });
        $a.enqueueAction(action);
    }
})

1 Answer 1

0

I believe you are simply missing the controller attribute in your component definition...

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">

should be

<aura:component controller="WhatsNewListController" implements="forceCommunity:availableForAllPageTypes" access="global">

(or whatever your actual controller class name is...)

In looking more at your code, it seems that you're missing some core concepts about how all the pieces connect. Your javascript controller and helper look good. However, your markup is incorrect.

The basic flow of your code is correct:

  1. The Init handler calls your doInit method.
  2. The doInit method calls getWrapperList.
  3. getWrapperList calls your Apex getWrapperList method.
  4. When the call to the Apex getWrapperList method returns, your javascript getWrapperList method sets the listOfWrappers attribute to the result. Presumably your Apex method is truly returning a list. However, your markup doesn't include an attribute named "listOfWrappers" it should be defined like this:
<aura:attribute name="listOfWrappers" type="List"/>
  1. Once that attribute is set by your controller, the component should be able to show the results. However, there are some issues with your markup...

Anytime you are referring to an attribute on the page, you need to use "v." -- for example:

<aura:iteration items="{!c.listOfWrappers}" var="listOfWrappers" end="10">

should be something along these lines:

<aura:iteration items="{!v.listOfWrappers}" var="wrapper" end="10">

and your aura:if should be something along these lines:

<aura:if isTrue="{!wrapper.Type == 'community_Event__c'}">

and any time you are referencing the data within the iteration, it should look something like this:

<div class="event-title">{!wrapper.Name}</div>

3
  • HI, I added that reference to my controller but the functionality still seems to be broken. If i reference my "WhatsNewController" where the list is created initially do I still need the WhatsNewListController javascript and helper files that I have pasted above or am I able to reference the apex controller directly?
    – Trace
    Commented Sep 16, 2019 at 16:35
  • I added some additional suggestions in my original answer... please let me know if this helps.
    – user72164
    Commented Sep 16, 2019 at 19:50
  • Hi Chris, Thanks for pointing those out, I have changed those as well. I have not reached ideal functionality but I believe my records are being passed correctly now, Its just a display issue now. I will mark this as the correct answer for simplicity sake and open a new question if i need assistance on the next step.
    – Trace
    Commented Sep 17, 2019 at 14:18

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .