Recursive Tree in Lightning Demo

treeNode.cmp

<aura:component >
    <aura:attribute name="node" type="Object" />
    <aura:attribute name="expanded" type="Boolean" default="{!false}" />
    
    <div>
        <div onclick="{!c.toggle}">
            <aura:if isTrue="{!v.node.items.length>0}">
            	[ {!v.expanded?'-':'+'} ]
            </aura:if> 
            <span>
                <aura:if isTrue="{!v.node.SmallPhotoUrl}">
                    <img src="{!v.node.SmallPhotoUrl}" />
                </aura:if>
                {!v.node.Name}
            </span>
        </div>
        <aura:if isTrue="{!v.expanded}">
            <div class="node">
                <aura:iteration items="{!v.node.items}" var="node">
                    <c:treeNode node="{!node}" />
                </aura:iteration>
            </div>
        </aura:if>
    </div>
</aura:component>

treeNode.css

.THIS .node {
    margin-left: 1em;
}

treeNodeController.js

({
    toggle: function(component, event, helper) {
        component.set("v.expanded", !component.get("v.expanded"));
    }
})

TreeNodeDataProvder.apxc

public class TreeNodeDataProvider {
    @AuraEnabled public static User[] getUsers() {
        return [SELECT Name, ManagerId, SmallPhotoUrl FROM User];
    }
}

TreeNodeDemo.app

<aura:application controller="TreeNodeDataProvider">
    <aura:attribute name="root" type="Map" default="{ 'Name': 'Loading...', items: []}" />
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <c:treeNode node="{!v.root}" expanded="{!true}" />
</aura:application>

TreenodeDemoAppController.js

({
    init: function(component, event, helper) {
        var action = component.get("c.getUsers");
        action.setCallback(this, response => {
            var users = {}, results = response.getReturnValue();
                users[undefined] = { Name: "Root", SmallPhotoUrl: null, items: [] };
                results.forEach(v => users[v.Id] = { Name: v.Name, SmallPhotoUrl: v.SmallPhotoUrl, items: [] });
                results.forEach(v => users[v.ManagerId].items.push(users[v.Id]));
                component.set("v.root", users[undefined]);
        		console.log(users[undefined]);
            });
        $A.enqueueAction(action);
    }
})