Issue with account hierarchy component

Question

I am trying to create a lightning component that displays the hierarchy of any given account. The issue I am having is passing the query from a helper class to the component itself. Can some one review the short code below with me to figure out why it will not populate? I am using the Tree view approach.

Component:

<aura:component controller="AccountController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,force:hasSObjectName" access="global">
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="gridColumns" type="List" />
<aura:attribute name="gridData" type="Object" />
<lightning:treeGrid columns="{! v.gridColumns }"
    data="{! v.gridData }"
    keyField="Name"
    aura:id="mytree"
/>

Component controller:

({
doInit: function (cmp, event, helper) {
    cmp.set('v.gridColumns', [
        {label: 'Account Name', fieldName: 'Name', type: 'text'},
        {label: 'Phone', fieldName: 'Phone', type: 'phone'},
        ]);
    helper.getAcctChildren(cmp);
}

})

Component Helper:

({
getAcctChildren : function (cmp) {
    var action = cmp.get("c.getAccountChildren");
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            var data = response.getReturnValue();
            //Change "Contacts" key to "_children"
            for(var i=0; i<data.length; i++) {
                data[i]._children = data[i]['Accounts'];
                delete data[i].Accounts;
            }
            cmp.set('v.gridData', data);
            cmp.set('v.recordId', Id);
        }
        // error handling when state is "INCOMPLETE" or "ERROR"
     });
     $A.enqueueAction(action);
}

})

Apex Class with Query to populate component:

public with sharing class AccountController {
@AuraEnabled
public static List<Account> getAccountChildren(){
    List<Account> accountchildren =
        [SELECT Id, Name, Phone, (SELECT Account.Name, Phone FROM ChildAccounts) FROM Account];
    return accountchildren;
}

}

The query returns valid results and the component with the column and row header is present, but no data.

Answer 1

I think it is just due to wrong index name. Replace following line of code with below one.

data[i]._children = data[i]['Accounts'];

By

data[i]._children = data[i]['ChildAccounts'];

Answer 2

For anyone stuck on at least getting to to the first level this worked for me. I am now trying to work on making this dynamic but there is an app in the exchange that will beat me to this AiflyHierarchy.

Apex public with sharing class AccountController { @AuraEnabled public static List getAccountChildren(Id accountId){ List accountcontacts = [SELECT Id, Name, Phone, CommunityAccountName__c, (SELECT Account.Name, Phone, CommunityAccountName__c FROM ChildAccounts) FROM Account WHERE Id=:accountId ]; return accountcontacts; } }

Component

<aura:component controller="AccountController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,force:hasSObjectName" access="global">
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="gridColumns" type="List" />
<aura:attribute name="gridData" type="Object" />
<aura:attribute name="recordId" type="Id" />

<lightning:treeGrid columns="{!v.gridColumns }"
    data="{!v.gridData}"
    keyField="Id"
    aura:id="mytree"
/>

Controller

({
doInit: function (cmp, event, helper) {
         cmp.set('v.gridColumns', [
        {label: 'Account Name', fieldName: 'Name', type: 'text'},
        //{label: 'Phone', fieldName: 'Phone', type: 'phone'},
        {label: 'URL', fieldName: 'CommunityAccountName__c', type: 'url'},
        ]);
    helper.getAcctContacts(cmp);
}

})

Helper

({
getAcctContacts : function (cmp) {
    var action = cmp.get("c.getAccountChildren");

    action.setParams({
        "accountId": cmp.get("v.recordId")
    });
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            var data = response.getReturnValue();
            //Change "Contacts" key to "_children"
            for(var i=0; i<data.length; i++) {
                data[i]._children = data[i]['ChildAccounts'];
                delete data[i].ChildAccounts;
            }
            cmp.set('v.gridData', data);
        }
        // error handling when state is "INCOMPLETE" or "ERROR"
     });
     $A.enqueueAction(action);
}})