2

I'm not able to pass a dynamic string array into a component without using java script.

Example: values="{!v.foo + ',bar'}". In this example, the (expected) array seems to be passed as a String. I would prefer to pass the values like {![v.foo, 'bar']} but it won't let me save.

unexpected token: a left square bracket at column 1

So is there a way to generate this array without using a controller? it would make my component much more readable.

my.app

<aura:application >
    <aura:attribute name="foo" type="String" default="foo" />

    <c:fooBar values="{!v.foo + ',bar'}" />
</aura:application>

fooBar.cmp

<aura:component >
    <aura:attribute name="values" type="String[]" />

    <aura:handler name="init" value="{!this}" action="{!c.init}" />
</aura:component>

Log typeof values

({
    init: function(cmp, event, helper) {
        console.log(typeof cmp.get("v.values"));
       // output: string
    }
})

3 Answers 3

3

Why you don't want to use Lightning Controller. I don't think you can handle it without JS, as compiler won't let you save it(this is also your current behaviour).

I suggest you create an array in JS and use that.

<aura:application >
    <aura:attribute name="foo" type="String" default="foo" />
    <aura:attribute name="values" type="String[]" default="[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <c:fooBar values="{!v.values}" />
</aura:application>

and JS

({
    doInit : function(cmp, event, helper) {
        var valueArr = [];
        valueArr.push('StaticValue');
        valueArr.push(cmp.get("v.DynamicValue"));
        cmp.set("v.values", valueArr);
       // output: string
    }
})
2
  • 1
    thanks for your response, and taking tie to anwer it! I decided to do it the other way around to overcome redundant js whenever I call my component (see my answer).
    – itsmebasti
    Commented Jan 22, 2019 at 12:13
  • @Basti glad to know you are able to solve it other way around. Commented Jan 22, 2019 at 13:07
0

Have you tried declaring the type of foo attribute to String[] in the Lightning application? I mean like below.

<aura:application >
<aura:attribute name="foo" type="String[]" default="foo" />
<c:fooBar values="{!v.foo + ',bar'}" />

1
  • This doesn't help and I don't see how it would.
    – itsmebasti
    Commented Jan 22, 2019 at 11:41
0

Thanks for your feedback. It seems to be impossible to solve it without js, so I decided to fix this at a central point in my fooBar component.

So since I know, that my dynamic input will always result in a comma separated list, I decided to convert it after passing it in, what makes calling my components readable and js free. (This example is using a value provider to point out why it's cleaner this way)

<aura:application >
    <c:X context="{!this}" /> // value Provider

    <c:fooBar values="{!X.foo + ',' + X.bar + ',' + X.more}" />
    <c:fooBar values="{!X.foo + ',' + X.more}" />
</aura:application>

<aura:component >
    <aura:attribute name="values" type="String" />
    <aura:attribute name="casted" type="String[]" />

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
</aura:component>


({
    doInit : function(cmp, event, helper) {
        cmp.set("v.casted", cmp.get("v.values").split(','));
        console.table(cmp.get("v.casted"));
    }
})

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .