Lightning Dynamic Component Creation

Question

I am creating some dynamic components inside a lightning component. They are created on the click of a button. The code seems to executes or render differently when the button is clicked first compared to subsequent clicks. The subsequent clicks render the component correctly. Using console.log - it looks like the code is executing differently on each click even though the exact same code is running (I have even take out the apex to strip the code down to hard coded lists to find where the issue is)

Lightning Component Helper

createDynamicComps : function(component, event) {
    component.set('v.body', []);
    var LevelOne = ['BMW','Audi','Jeep'];
    var LevelTwo = ['Black','Green','Red','Blue','Purple'];

    for (var leveloneIterator = 0; leveloneIterator < LevelOne.length; leveloneIterator++){
         $A.createComponent("ui:message", {
            "Title": 'test',
            "severity" : "message"
         },
         function(newCmp, status, errorMessage){
             var body = component.get("v.body");
             body.push(newCmp);                                                  
             component.set("v.body", body);
             console.log('UI Message');
         }
      );

    for (var leveltwoIterator = 0; leveltwoIterator < LevelTwo.length; leveltwoIterator++){
        $A.createComponent("ui:inputRadio", {
            "aura:id": LevelTwo[leveltwoIterator].replace(" ","")+leveltwoIterator,
            "name": LevelTwo[leveltwoIterator].replace(" ",""),
            "label": LevelOne[leveloneIterator] + " Color: " + LevelTwo[leveltwoIterator]
        },
        function(newCmp, status, errorMessage){
            var body = component.get("v.body");
            body.push(newCmp);                                                    
            component.set("v.body", body);
            console.log('UI Radio');
        }
    );
}, ...

This is called by the controller.The controller code is called when a button is clicked

doButtonStuff : function(component, event, helper) {

    helper.createDynamicComps(component, event);


},

When the button is clicked the first time - The four UI Messages display and then 15 radio buttons. When the button is clicked subsequent times - a message is displayed and then five radio buttons below it for each message. This execution is also shown in the console screen shot below

Answer 1

I was able to resolve the issue by doing the same thing as in answer linked below. I created an array of components, add the components to the array in the loop and then created/pushed the components outside of the loop.

Dynamically Building Nested HTML in Lightning Component

populateRow : function(component) {
var record = component.get("v.record");
console.log('record = ' + JSON.stringify(record));
var fields = component.get("v.fields");

for (var idx in fields) {
    var field = fields[idx];
    var value = '';
    if(field.includes('.')) {
        value = record[field.substring(0, field.indexOf('.'))].Name
    } else {
        value = record[field];
    }
    $A.createComponents([
            ["aura:HTML", {
                "tag": "td",
                "HTMLAttributes": {
                    "id": "tdId"
                }
            }],
            ["aura:HTML", {
                "tag": "div",
                "body": value,
                "HTMLAttributes": {
                    "id": "dynamicDiv",
                    "title": value,
                    "class": "slds-truncate"
                }
            }]
        ],
        function(components, status, errorMessage){
            if (status === "SUCCESS") {
                var td = components[0];
                var div = components[1];
                td.set("v.body", div);

                var container = cmp.find("container");
                if (container.isValid()) {
                    var body = container.get("v.body");
                    body.push(td);
                    container.set("v.body", body);
                }
            }
            else if (status === "INCOMPLETE") {
                console.log("No response from server or client is offline.")
                // Show offline error
            }
            else if (status === "ERROR") {
                console.log("Error: " + JSON.stringify(errorMessage));
                // Show error message
            }
        }
    );
}

}