Lightning component : Get the id of a record

Question

In a lightning component I display a list of articles (Article__c custom object) so I ca see, for example, the name of the article, the price, and a button that I'd like redirect to another component which display the details of the article selected.

For now I'm just trying to get the id of the article, in a basic alert in javascript, but I doesn't work : it says the id is null.

Here is a part of the component :

<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="{!wrap.art.Id}">Details</button>
                        </td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>

The associated controller js (with the function getDetail)

({
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-data") || event.target.parentNode.getAttribute("data-data")
    alert('detail article : id = ' + id); //it gives me null
} })

Thanks !

EDIT

And the wrapper class in case you wonder what is the "art" :

public with sharing class ListeArticlesWrapper {
//wrapper pour récupérer les articles selectionnés
@AuraEnabled
public Article__c art {get; set;}

@AuraEnabled
public Boolean selected {get; set;}
}

Answer 1

Just to get the id of the object being iterated, you do not need to implement force:hasRecordId.It is need only if your component should work in a record's context (eg:Inside Record Detail Page).

Generally to store private data in the HTML element custom data attribute is the standard way used in HTML5.More info can be found here.

The syntax of using data attributes in HTML should follow this format: data-* attributes

So you need to change it like this:

<button class="slds-button slds-button--neutral slds-not-selected" 
                                    onclick="{!c.getDetail}" data-recId="{!wrap.art.Id}">Details</button>

In the controller, you can access like this:

event.target.getAttribute("data-recId")

Answer 2

You have to add force:hasRecordId interface in your component. After that initialise an attribute like below. Then use the attribute in controller.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId">
    <aura:attribute name="recordId" type="Id" />
</aura:component>

Take note that currently this only works if you are going to use your component in App Builder, and for a record home page in Lightning Experience. For more details you can read about it in the docs.