[SalesForce] Lightning component : Get the id of a record

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;}
}