How to Navigate to the record/get the record id in <Aura:iteration>

Question

I am facing one issue with navigating to record from as href dont work in SF1 so i need to use controller for navigation e.g var sObjectEvent = $A.get("e.force:navigateToSObject"); but i need to get the Id of record from aura:iteraion as current as i am getting undefined or only one id if i use input:hidden, please help in this to solve.

Example code snippet:

<aura:component>
  <aura:attribute name="OpptyList" type="Opportunity[]"/>
  <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <div>
      <aura:iteration items="{v.OpptyList}" var="oppty" >
        <span>
          <a href="" onclick="{!c.navigateToOppty}">{!oppty.Name}</a>
          <!-- used id attribute, since aura:id is not working-->
          <input:hidden value="{!oppty.Id}" id="opptyId"/>
        </span>   
        <span>    
         <a href="" onclick="{!c.navigateToAccount}">{!oppty.Account.Name}</a>           
         <!-- used id attribute, since aura:id is not working-->        
         <input:hidden value="{!oppty.AccountId}" id="accountId"/>
        </span>
      </aura:iteration>     
    </div>
</aura:component>

controller.js

({
  navigateToOppty: function (component) {
    // it returns only first value of Id
    var OpptyId = document.getElementbyId("opptyId").value;

    var sObjectEvent = $A.get("e.force:navigateToSObject");
    sObjectEvent.setParams({
        "recordId": OpptyId,
        "slideDevName": "detail"
    });
    sObjectEvent.fire();
  },
  navigateToAccount: function (component) {
    // it returns only first value of Id
    var AcctId = document.getElementbyId("AccountId").value;

    var sObjectEvent = $A.get("e.force:navigateToSObject");
    sObjectEvent.setParams({
        "recordId": Acctid,
        "slideDevName": "detail"
    });
    sObjectEvent.fire();
  }
})

Answer 1

Lightning framework from SFDC is a component based framework ,hence I would suggest you to break your app into as much as possible

Lets create a new component for each line item and called it opportunityCard

<aura:component>
 <aura:attribute name="oppty" type="Opportunity"/>
 <span> 
  <a href = "" aura:id="{!v.oppty.Id}" onclick = "{!c.navigateToOppty}">{!v.oppty.Name}</a>
 </span>   
 <span>    
   <a href = "" aura:id="{!v.oppty.AccountId}" onclick = "{!c.navigateToAccount}">{!v.oppty.Account.Name}</a>       
 </span>  
</aura:component/>  

Your parent component will simplify like below

<aura:component>
<aura:attribute name ="OpptyList" type = "Opportunity[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
 <div>
  <aura:iteration items = "{v.OpptyList}" var = "opp" >
   <c:opportunityCard oppty="{!opp}"/>
 </aura:iteration/>
 </div>
</aura:component>  

You can directly use attribute now in your controller js .Note that this is a controller for opportunityCard

opportunityCardController.js

({   
  navigateToOppty:function(component){
  // it returns only first value of Id
  var Opprec  = component.get("v.oppty");

  var sObectEvent = $A.get("e.force:navigateToSObject");
    sObectEvent .setParams({
    "recordId": Opprec.Id  ,
    "slideDevName": "detail"
  });
  sObectEvent.fire(); 
},
  navigateToAccount.:function(component){
   // it returns only first value of Id
   var AcctId = component.get("v.oppty").AccountId;

   var sObectEvent = $A.get("e.force:navigateToSObject");
    sObectEvent .setParams({
    "recordId": Acctid,
    "slideDevName": "detail"
   });
    sObectEvent.fire(); 
   },
 })

NOTE : You can use helper class for your controller and reduce some duplicate code

Answer 2

This should be possible using the following line of code:

<a href="{!'<Your URL with suffix />'+Account.Id}">{!Account.Name}</a>