1

I am creating a lightning component that is a Day-of-the-Week picker widget. it will allow a user to enable or disable days from a list. My front has two attributes that are useful here - a list of available days and then the list of values.

<aura:attribute name="days" type="Object[]" default="['Mon','Tue','Wed','Thu','Fri']" />
<aura:attribute name="dayValues" type="Boolean[]" default="[true, true, false, false, true]" />

There is a 1:1 relationship between the two arrays. When displaying the list I am looping through the days list and outputting the day's name. I then want to use the index of the current day in the iteration to access the corresponding value from the dayValues list.

<aura:iteration items="{!v.days}" var="day" indexVar="idx">
    <div>{!day} - {!v.dayValues[idx]}</div>
</aura:iteration">

.. Salesforce throws up on this. The error 'expecting a positive integer, found 'idx' at column 13 of expression: v.dayValues[idx]' leads me to believe the issue is that the idx variable is a String and not an Integer.

How can accomplish this without combining the days of the week and the values into one object?

marked as duplicate by Derek F, Raul, Dave Humm, glls, Gortonington Nov 7 '17 at 13:16

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • So... the index is basically only available as a label. – captain_jim1 Nov 6 '17 at 21:54
  • well you could pass it to the controller and use it as an index back there. Or wrapp it in a componentn. here are some exapmples – Basti Nov 6 '17 at 21:56
5

This kind of question had been asked several times so there are couple answers already, that you might find here:

In your case I would recommend creating a component, that knows your dayValues and than you just pass in your day.

<!-- myDay -->
<aura:component>
    <aura:attribute name="day" type="String" />
    <aura:attribute name="isFoo" type="Boolean" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <div>{!v.day} - {!v.isFoo}</div>
</aura:component>

({
    doInit: function(cmp, evt, helper) {
        var day = cmp.get("day");
        var foo = swtich/case...
        cmp.set("v.isFoo", foo);
    }
})

Use it like this:

<aura:iteration items="{!v.days}" var="day">
    <c:myDay day="{!day}" />
</aura:iteration>

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