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>

.. 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?

  • 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

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: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>

    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}" />

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