2

I want to be able to call $A.createComponents(type, attribute, calllback); with values in an array. SF doc I am following: Dynamically Creating Components. But the obvious value of this would be to populate an array and pass it to createComponents.

I am getting this error:

enter image description here

Here is the component:

    <aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="body" type="Aura.Component[]"/>

      {!v.body}

    </aura:component>

And the controller:

    ({
    doInit: function(cmp) {
debugger;
    var typeArray = ["ui:message","ui:message"];
    var objArray = [];
    var obj0 = {title:"Sample Thrown Error", closable:"true"};
    objArray.push(obj0);
    var obj1 = {title:"Sample Thrown Error1", closable:"true"};
    objArray.push(obj1);

        var finalInputs = [];

        for(var i = 0; i < typeArray.length; i++){
            var type = typeArray[i];
            var attributes = objArray[i];
            finalInputs.push([type, attributes]);
        }



   $A.createComponents(finalInputs,
    function(components, status, errorMessage){
        debugger;

        if (status === "SUCCESS") {
            var cmps = components;
            cmp.set('v.body', cmps);
        }
        else if (status === "INCOMPLETE") {
            console.log("No response from server or client is offline.")
            // Show offline error
        }
        else if (status === "ERROR") {
            console.log("Error: " + errorMessage);
            // Show error message
        }
    }
);

    },
})

1 Answer 1

3

If you look closely at the example provided in the developer docs, you'll see that the params for $A.createComponents are [array,callback] - specifically ([[][]...],function)

Put your code in this format and you'll be ok.

Eg:

$A.createComponents([typeArray, objArray],
    function(components, status, errorMessage){

You mentioned that you were still having problems - looking at your code again, I can see that it has a further problem. In the example in the docs, you'll see that the structure of the code is quite different to what you have:

[
["ui:message",{
    "title" : "Sample Thrown Error",
    "severity" : "error",
}],
["ui:outputText",{
    "value" : e.message
}]
]

Generalising this you get:

$A.createComponents(
  [
    ["component1name",{"attributes1":"here"}],
    ["component2name",{"attributes2":"here"}]
  ],
  function()
);

Docs here

2
  • This makes a lot of sense. Thank you, but I am getting a similar error in regard to the js object being passed: Assertion Failed!: ComponentService.createComponent(): 'attributes' must be a valid Object. : false
    – Allen Mann
    Commented Dec 13, 2017 at 2:20
  • Thank you so much for the clarification. I have updated the code above with a working example for anyone to reference in the future.
    – Allen Mann
    Commented Dec 13, 2017 at 15:45

You must log in to answer this question.

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