Call lightning component inside same lightning component

Question

I'm trying to achieve a lightning component that recursively calls itself to generate a tree hierarchy with attributtes of a filled map that goes like Map<Integer,Map<Id,List<Object>>> being first key the level of the tree and second key the parentid of the list of objects retrieved.

My question is: Is it possible to create a component that works like this example?

CustomLightningComponent

<aura:component>
    <aura:attribute name="mapObject" type="map"/>
    <aura:attribute name="level" type="integer"/>
    <aura:attribute name="parentId" type="string"/>
    <aura:attribute name="listObject" type="list"/>

    <aura:iteration items="listObject" var="obj">
        <p>{!obj.Name}</p>
        <c:CustomLightningComponent mapObject="{!mapObject}" level="{!v.level}" parentId="{!obj.Id}"/>
    </aura:iteration>
</aura:component>

CustomLightningComponentController

({
    doInit: function(component, event, helper) {
         var map = component.get("v.mapObject");
         var level = component.get("v.level");
         var parentId = component.get("v.parentId");

         var listObjects = map[level][parentId];
         //To iterate over next level
         component.set("v.level", level++);
         //Set list
         component.set("v.listObject", listObjects);
    }
})

The code is pretty basic just to put an example of what I want to implement.

Is this even possible? Call the same lightning component recursively?

Arin Arin · Accepted Answer · 2018-07-29T12:56:35

Yes, It's possible to iterate over child component using aura:iteration tag. However, the map you have created looks very complex and lightning doesn't provide very easy access to map and its contents. Instead of such complex map you can create JSON object in javascript(helper) that will definitely reduce the complexity.

Call lightning component inside same lightning component

1 Answers