[SalesForce] Nested Dynamically create html components in lightning not working

I am trying to implement nested dynamic creation of html components in lightning but it is not working.
I need to create multiple divs inside divs. I need to achieve something like this

<div>
    <div></div>
    <div></div>
</div>

Below is the code that is not working:

createDynamicallyDivs : function(component, event, helper) {
        console.log('here');
        var index=component.get("v.index");
        var newComponents = [];
            newComponents.push(["aura:html", {
                        "tag": "div",
                        "body": "",
                        "HTMLAttributes": {
                            "class": "slds-grid slds-p-bottom_small",
                            "aura:id":"div_row_"+index
                        }

                    }]);
          newComponents.push(["aura:html", {
                        "tag": "div",
                        "body": "",
                        "HTMLAttributes": {
                            "class": "slds-frame slds-size--2-of-12 slds-p-right_x-small"
                         }

                    }]);
          newComponents.push(["aura:html", {
                        "tag": "div",

                        "body": "Then by",
                        "HTMLAttributes": {
                            "class": "slds-float_right",
                            "title":"Then by"

                        }

                    }]);
           newComponents.push(["aura:html", {
                        "tag": "div",

                        "body": "",
                        "HTMLAttributes": {
                            "class": "slds-frame slds-size--3-of-12 slds-p-right_large",


                        }

                    }]);
           newComponents.push(["lightning:select",{
                            "title" : "",

                        }]);


    $A.createComponents(newComponents,
            function (components, status, errorMessage) {
                 if (status === "SUCCESS") 
                 {
                    console.log(components.length);
                    var parentBody = component.find("newtag");
                    var pageBody = parentBody.get("v.body");
                    var div1 = components[0];
                    var div2 = components[1];
                    var div3 = components[2];
                   div2.set("v.body",div3);
                   div1.set("v.body",div2);
                    pageBody.push(div1);
                    parentBody.set("v.body", pageBody);
                }else 
                {
                    console.log('error');
                 }
            }
        );
},

Best Answer

You have bug at "lightning:select" that you have creating Dynamically provide a required attribute label and name .

EXample:

createDynamicallyDivs : function(component, event, helper) {
        console.log('here');
        var index=component.get("v.index");
        var newComponents = [];
        newComponents.push(["aura:html", {
            "tag": "div",
            "body": "",
            "HTMLAttributes": {
                "class": "slds-grid slds-p-bottom_small",
                "aura:id":"div_row_"+index
            }

        }]);
        newComponents.push(["aura:html", {
            "tag": "div",
            "body": "",
            "HTMLAttributes": {
                "class": "slds-frame slds-size--2-of-12 slds-p-right_x-small"
            }

        }]);
        newComponents.push(["aura:html", {
            "tag": "div",

            "body": "Then by",
            "HTMLAttributes": {
                "class": "slds-float_right",
                "title":"Then by"

            }

        }]);

        newComponents.push(["lightning:select",{
            "label" :"Select an item",
            "name" : "selectItem"
        }]);
        newComponents.push(["aura:html", {
            "tag": "option",
            "value":"1",
            "body": "",
            "HTMLAttributes": {
                "class": "slds-frame slds-size--3-of-12 slds-p-right_large",
            }

        }]);


        $A.createComponents(newComponents,
                            function (components, status, errorMessage) {
                                if (status === "SUCCESS") 
                                {
                                    console.log(components.length);
                                    var parentBody = component.find("newtag");
                                    var pageBody = parentBody.get("v.body");
                                    var div1 = components[0];
                                    var div2 = components[1];
                                    var div3 = components[2];
                                    var lightningselect = components[3];
                                    var option = components[4]; 
                                    lightningselect.set("v.body",option);
                                    div2.set("v.body",div3);
                                    div1.set("v.body",div2);
                                    pageBody.push(div1);
                                    pageBody.push(lightningselect);
                                    parentBody.set("v.body", pageBody);
                                }else 
                                {
                                    console.log('error');
                                }
                            }
                           );
    },
Related Topic