0

I have a component with a data table. I am able to get the selected rows in an object. I am trying to pass it to a different component using the application event. The event fires but it doesn't display the passed attributes on a different component. Here is the Event:

<aura:event type="APPLICATION" description="Event template">
    <aura:attribute name="selectedProvidersList" type="List" access="GLOBAL"/>

</aura:event>

The first component firing the event and its the js

   <!--Register Provider Select Event-->
        <aura:registerEvent name="selectProv" type="c:SelectProviders"/>
 <!--SELECTED ROWS-->
    <aura:attribute name="selectedRowsDetail" type="Object"/>
    <aura:attribute name="selectedRows" type="List"/>  <!--This is selectedRows -->
    <aura:attribute name="selectedSearchableList" type="List"/> <!--This is a list of all rows selected-->

    <lightning:button variant="brand" label="Next" onclick="{!c.selectProviders}"></lightning:button>

controller:

updateSelectedProviders : function(component, event, helper){
        var selectedRows = event.getParam('selectedRows');
        console.log('Selected rows '+selectedRows);
        let obj =[];
        for(var i =0; i<selectedRows.length; i++){
            obj.push(selectedRows[i]);
            console.log('Selected rows name '+selectedRows[i].Id);
            //Here you can get all the needed fields output and print on the next page
        }
        component.set("v.selectedSearchableList", obj);



    },

    selectProviders : function(component, event, helper){
        var evt = $A.get("e.c:SelectProviders");
        evt.setParams({
            "selectedProvidersList" : component.get("v.selectedSearchableList")
        });

        console.log('Event fired');
        evt.fire();
}

The target componnet where I am trying to display the output:

<aura:attribute name="myProviders" type="List"/>
 <!--calling event-->
    <aura:handler  event="c:SelectProviders" action="{!c.getSelectedProviders}" />

<aura:iteration items="myProviders" var="provider">
        {!provider.id}
</aura:iteration>

controller.js

getSelectedProviders : function(component, event) {
        var showResultsData = event.getParam("selectedProvidersList");
        component.set("v.myProviders",showResultsData );
        console.log('Event here'+component.get("v.myProviders"));
        console.log('Event parama'+JSON.stringify(showResultsData));
    }
2
  • Does the other component receive the event at all? If it does, what's the delta between the received parameters and the expected values?
    – David Reed
    Feb 23, 2020 at 2:38
  • Yes It does I am able to see the console logs for the parameters passed. I am getting the same values that I am expecting but it doesnt show in the aura iteration component but shows in console.
    – P.Shri
    Feb 23, 2020 at 2:40

2 Answers 2

0

This looks like a case sensitivity issue. In the sending component, you have:

    let obj =[];
    for(var i =0; i<selectedRows.length; i++){
        obj.push(selectedRows[i]);
        console.log('Selected rows name '+selectedRows[i].Id);

Note the case if selectedRows[i].Id.

But in the receiving component, you have

<aura:iteration items="myProviders" var="provider">
        {!provider.id}
</aura:iteration>

Aura and JavaScript are case-sensitive, so you'll need to use .Id here too.

Additionally, <aura:iteration> needs a binding:

<aura:iteration items="{! v.myProviders }" var="provider">

to get access to the component attribute.

3
  • Event parama[{"Id":"003f000001NlUP2AAN","AccountId":"001f000001PNdE9AAL","Is_Referrable__c":false,"Name":"George A. Taylor",... This is the console log. And I changed the id to Id still didnt work.
    – P.Shri
    Feb 23, 2020 at 2:47
  • I have wrong syntax for aura iteration items items="{!v.myProviders}"
    – P.Shri
    Feb 23, 2020 at 2:51
  • I think it's the missing bind on the items attribute, @P.Shri.
    – David Reed
    Feb 23, 2020 at 2:55
0

There was a wrong syntax in aura iteration: (missed v.)

<aura:iteration items="{!v.myProviders}" var="provider">
        {!provider.id}
</aura:iteration>

You must log in to answer this question.

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