Access an element of a list in Aura Component

Question

I want to show in the UI dynamically the current page label...

so i try something like this in Component section: i want to show the v.pages[currentPage].Label__c value... But i get message on save expecting a positive integer, found '+' at column 9 of expression: v.Pages[+"!v.currentPage"+].Label__c: Source

Code snippet below...

<aura:attribute name="pages" type="Page__c[]" />
<aura:attribute name="currentPage" type="Integer" />
<h1>
    <span class="slds-page-header__title slds-truncate" title="{!v.currentPage}"> 
    {!v.Pages[+"!v.currentPage"+].Label__c}</span>
</h1>

Any ideas ?

Answer 1

You can not access the array index dynamically in HTML.

As an alternative, you can set the current page label in js

Example

<aura:component>
    <aura:attribute name="pages" type="Page__c[]" />
    <aura:attribute name="currentPage" type="Integer" default="0" />
    <aura:attribute name="currentPageLabel" type="String" />

    <aura:handler name="change" value="{!v.currentPage}" action={!c.setLabel}" />
    ...

    {!v.currentPageLabel}
</aura:component>

JS

setLabel: function(component) {
    const pages= component.get('v.pages');
    const currentPage= component.get('v.currentPage');

    component.set('v.currentPageLabel', pages[currentPage].Label__c);
}