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
    }
})
Improve this question

3 Answers 3

Reset to default
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
    }
})
Improve this answer
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). 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'}" />

Improve this answer
1
  • This doesn't help and I don't see how it would. 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"));
    }
})
Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.