3

I am building a reusable sidebar navigation component, however I am getting errors about parenthesis in my markup:

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >

    <aura:attribute name="items" type="Map" default="
                                                     {
                                                        'Group 1': ['Item 1', 'Item 2'],
                                                        'Group 2': ['Item 3']
                                                     }
                                                     " />

    <nav class="slds-nav-vertical" aria-label="Sub page">

        <aura:iteration items="{!v.items.keySet()}" var="item">
            <div class="slds-nav-vertical__section">
                <h2 id="entity-header" class="slds-nav-vertical__title slds-text-title_caps">{!item}</h2>
                <ul>
                    <aura:iteration items="{!v.items.get(item)}" var="subItem">
                        <li class="slds-nav-vertical__item"><a href="javascript:void(0);" class="slds-nav-vertical__action" aria-describedby="entity-header">{!subItem}</a></li>                        
                    </aura:iteration>
                </ul>
            </div>                        
        </aura:iteration>        
    </nav>

Salesforce doesn't like this line:

<aura:iteration items="{!v.items.keySet()}" var="item">

And this line:

<aura:iteration items="{!v.items.get(item)}" var="subItem">

If I cannot use parenthesis, how does one get items from a Map and its keySet()?

3
  • 3
    you cannot iterate a map in lightning components using aura:iteration you have to convert it to array of objects
    – RedDevil
    Feb 5 '18 at 16:20
  • So you are saying I need something like this: <aura:attribute name="items" type="Object[]" default="{ ... }" />? What about the use of parenthesis? Feb 5 '18 at 16:22
  • 3
    Yeah and the attribute data if you are getting it from server should also be sent in that format List<Object> format from apex.
    – RedDevil
    Feb 5 '18 at 16:23
3

As RedDevil pointed out, I needed to use an Object[] instead of a Map. Here's the working sidebar navigation component:

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >
    <aura:attribute name="items" type="Object[]" default="[ { headerLabel: 'Header 1', subItems: [ { label: 'Item 1', active: true, url: '#' }, { label: 'Item 2', url: '#' } ] }, { headerLabel: 'Header 2', subItems: [ { label: 'Item 3', url: '#' }, { label: 'Item 4', url: '#' } ] } ]" />
    <nav class="slds-nav-vertical" aria-label="Sub page">
        <aura:iteration items="{!v.items}" var="item">
            <div class="slds-nav-vertical__section">
                <h2 id="entity-header" class="slds-nav-vertical__title slds-text-title_caps">{!item.headerLabel}</h2>
                <ul>
                    <aura:iteration items="{!item.subItems}" var="subItem">
                        <aura:if isTrue="{!subItem.active}">
                            <li class="slds-nav-vertical__item slds-is-active"><a href="{!subItem.url}" class="slds-nav-vertical__action" aria-describedby="entity-header">{!subItem.label}</a></li>                        
                            <aura:set attribute="else">
                                <li class="slds-nav-vertical__item"><a href="{!subItem.url}" class="slds-nav-vertical__action" aria-describedby="entity-header">{!subItem.label}</a></li>                                
                            </aura:set>
                        </aura:if>
                    </aura:iteration>
                </ul>
            </div>                        
        </aura:iteration>        
    </nav>
</aura:component>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.