+ Start a Discussion
doudou 

Pass data from one component to another and display it

I have 2 lightning components :
the first display a list of articles, for each article there is a button that redirect to the other component that display some information about the selected article. 

Here is a part of the first component :
<aura:attribute name="recordId" type="Id" />

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="wrappers" type="ListeArticlesWrapper" />
<aura:attribute name="articles" type="Article__c" />

<aura:attribute name="Detail" type="String"/>
<aura:registerEvent name="navigate" type="c:NavigateToDetail"/>

<div class="page">
    <h1>Liste des articles</h1>
    <div class="slds">
        <table class="slds-table slds-table--bordered slds-table--cell-buffer">
            <thead>
                <tr class="slds-text-heading--label">
                    <th scope="col" class="head"></th>
                    <th scope="col" class="head">Nom</th>
                    <th scope="col" class="head">Type</th>
                    <th scope="col" class="head">Prix</th>
                    <th scope="col" class="head"></th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.wrappers}" var="wrap">
                    <tr>
                        <td class="cell">
                            <ui:inputCheckbox value="{!wrap.selected}" />
                        </td>
                        <td class="cell">
                           <ui:outputText value="{!wrap.art.Name}" />
                        </td>
                        <td class="cell">
                            <ui:outputText value="{!wrap.art.Type__c}" />
                        </td>
                        <td class="cell">
                            <ui:outputText value="{!wrap.art.Prix__c}" />
                        </td>
                        <td class="cell">
                            <button class="slds-button slds-button--neutral slds-not-selected" 
                                    onclick="{!c.getDetail}" data-recId="{!wrap.art.Id}">Details</button>
                        </td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>

Ant the associated controller
doInit : function(component, event, helper) {
    helper.init(component, event);
},

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

getDetail : function(component, event, helper){
    var id = event.target.getAttribute("data-recId");

    var article = component.get("v.article");

    var evt = $A.get("e.c:NavigateToDetail");
    evt.setParams({
        "detail": article
    });
    evt.fire();
}

The getDetail retrieve the id of the article correctly, so I think it's ok for it.
Here is the second component (that display the detail) :
<aura:attribute name="item" type="Article__c"/>

    <aura:handler event="c:NavigateToDetail" action="{!c.handleAfficherDetail}"/>
    <div class="name">Nom : {!v.item.Name}</div>
    <ui:button label="Framework Button" press="{!c.handleAfficherDetail}"/>

    <div class="slds">
            <table class="slds-table slds-table--bordered slds-table--cell-buffer">
                <thead>
                    <tr class="slds-text-heading--label">
                        <th class="head">Name</th>
                        <th class="head">Type</th>
                        <th class="head">Prix</th>
                    </tr>
                </thead>
                <tbody>
                        <tr>
                            <td class="cell">
                                <ui:outputText value="{!v.item.Name}" />
                            </td>
                            <td class="cell">
                                <ui:outputText value="{!v.item.Type__c}" />
                            </td>
                            <td class="cell">
                                <ui:outputText value="{!v.item.Prix__c}" />
                            </td>
                        </tr>
                </tbody>
            </table>
        </div>

And its controller :
({
    handleAfficherDetail : function(component, event, helper) {

        var product = event.getParam("detail");
        console.log(product);

        var item = component.get("v.item");

        component.set("v.item", item);
    },
})

The problem is that the second component only display an empty table, without the data. Moreover, the console.log in this controller display nothing, like if the controller was never triggered.

Do you have any idea of how I can fix that ?
Aabhi BattaAabhi Batta
Hello ,

You are retrieving the data with the wrapper class and firing the event with "v.articles" which is empty .

Solution :
Send the ID in event and in doInit function of second controller , call again the apex class to retrieve the data for that particular ID .

Thanks
EldonEldon
In the first component the attribute name is "articles" and you gave it in the controller as "v.article". Correct it and let me know the console log.