auraIterationSampleWithDynamicComponentCreation.cmp

<aura:component>
    <aura:attribute name="contacts" type="Contact[]" />
    <aura:handlr name="change" value="{!v.contacts} action="{!c.changeContacts}" />
    <div aura:id="container">
    </div>
</aura:component>

auraIterationSampleWithDynamicComponentCreationController.js

({
    changeContacts : function(component, event, helper) {
        helper.loadContactItems(component);
    }
})

auraIterationSampleWithDynamicComponentCreationHelper.js

({
    loadContactItems : function(component) {
        let contacts = component.getReference("v.contacts") || [];
        let container = component.find("container");
        $A.createComponent(
            "c:ContactItems",
            {
                "aura:id": "ContactItemsComponent",
                "contacts": contacts
            },
            function(newContactItems, status, errorMessage) {
                if (status === "SUCCESS") {
                    container.set("v.body", [newContactItems]);
                } else if (status === "INCOMPLETE") {
                    console.log("No response from server or client is offline.");
                } else if (status === "ERROR") {
                    console.log("Error: " + errorMessage);
                }
            }
        );
    }
})

ContactItems.cmp

<aura:component>
    <aura:attribute name="contacts" type="Contact[]"/>
        
    <aura:iteration items="{!v.contacts}" var="p">
        <c:ContactItem fullName="{!p.Name}" accountName="{!p.Account.Name}" />
    </aura:iteration>
</aura:component>