javascript - how to properly use recursive function to go through multiple nested objects

Question

In my Angular app, I'm using AngularTree directive (http://wix.github.io/angular-tree-control) to render a tree view of the following data structure, as shown in https://jsfiddle.net/eugene_goldberg/Lvwxx629/17/:

$scope.subjectAreas = [
        {
            name:   "Area-1",
            link:   "dashboards.dashboard_1",
            entities: [
                {
                    name: "entity 1"
                },
                {
                    name: "entity 2"
                }
            ],
            offerings: [
                {
                    name: "offering 1"
                },
                {
                    name: "offering 2"
                }
            ]
        },
        {
            name:   "Area-2",
            link:   "dashboards.dashboard_1",
            entities: [
                {
                    name: "entity 3"
                }
            ],
            offerings: [
                {
                    name: "offering 3"
                }
            ]
        },
        {
            name:   "Area-3",
            link:   "dashboards.dashboard_1",
            entities: [
                {
                    name: "entity 4"
                },
                {
                    name: "entity 5"
                },
                {
                    name: "entity 6"
                }
            ],
            offerings: [
                {
                    name: "offering 4"
                },
                {
                    name: "offering 5"
                }
            ]
        }
    ];

This treeView directive provides the "createSubTree" function, which I'm using as follows:

function createSubTree(ary) {
        var res = [];
        if (ary) {
            res = ary.map(function(v, k) {
                var id = k + 1;
                return {
                    i: id,
                    id: 'id' + id,
                    label: v.name,
                    children: createSubTree(v.entities)
                }
            });

        }
        return res;
    }

    $scope.treedata = createSubTree($scope.subjectAreas);

The output looks like this:

Area-1
   entity-1
   entity-2
Area-2
   entity-3
Area-3
   entity-4
   entity-5
   entity-6

As my data structure contains two nested arrays for each SubjectArea (entities, and offerings), I need to have a sub-folder for entities, and a sub-folder for offerings as children of each SubjectArea, so the output should look like this:

Area-1
   entities
       entity-1
       entity-2
   offerings
       offering-1
       offering-2
Area-2
   entities   
       entity-3
   offerings
       offering-3
Area-3
   entities
       entity-4
       entity-5
       entity-6
   offerings
       offering-4
       offering-5

How can I modify the current code to have the recursive function create sub-groups for both entities and offerings?

Answer 1

Change your data to this:

$scope.subjectAreas = [{
    name: "Area-1",
    link: "dashboards.dashboard_1",
    entities: [{
        name: 'entities',
        entities: [{
            name: "entity 1"
        }, {
            name: "entity 2"
        }]
    }, {
        name: 'offerings',
        entities: [{
            name: "offering 1"
        }, {
            name: "offering 2"
        }]
    }]
}, {
    name: "Area-2",
    link: "dashboards.dashboard_1",
    entities: [{
        name: "entity 3"
    }],
    offerings: [{
        name: "offering 3"
    }]
}, {
    name: "Area-3",
    link: "dashboards.dashboard_1",
    entities: [{
        name: "entity 4"
    }, {
        name: "entity 5"
    }, {
        name: "entity 6"
    }],
    offerings: [{
        name: "offering 4"
    }, {
        name: "offering 5"
    }]
}];

I've only done the first part, but you can complete the rest.