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?
See Question&Answers more detail:
os