In my Angular project, I am incorporating the AngularTree directive from to display a tree view based on this specific data structure:
$scope.subjectAreas = [
{
name: "Area-1",
link: "dashboards.dashboard_1",
entities: [
{
name: "entity 1"
},
{
name: "entity 2"
}
]
},
{
name: "Area-2",
link: "dashboards.dashboard_1",
entities: [
{
name: "entity 3"
}
]
},
{
name: "Area-3",
link: "dashboards.dashboard_1",
entities: [
{
name: "entity 4"
},
{
name: "entity 5"
},
{
name: "entity 6"
}
]
}
];
The treeView directive includes a helpful "createSubTree" function that I am utilizing in the following manner:
function createSubTree(level, width, prefix) {
if (level > 0) {
var res = [];
for (var i=1; i <= width; i++)
res.push({ "label" : getName(i), "id" : "id"+prefix + i, "i": i,
"children": createSubTree(level-1, setNumberOfChildren(getName(i),i), prefix + i +".")});
return res;
}
else
return [];
}
These are the supporting functions used in my implementation:
function countNumberOfEntities(index){
return $scope.subjectAreas[index].entities.length;
}
function getSubjectAreasLength(){
return $scope.subjectAreas.length;
}
function setNumberOfChildren(subjectArea, index){
var numberOfChildEntities = countNumberOfEntities(index-1);
return numberOfChildEntities;
}
function getName(index){
if($scope.subjectAreas[index-1]){
var subjectAreaName = $scope.subjectAreas[index-1].name;
var n = subjectAreaName;
return subjectAreaName;
}
}
While the tree view displays correctly, all children (entities within each SubjectArea) are displaying the same names as their parent SubjectArea.
The current output is shown below:
Area-1
Area-1
Area-2
Area-2
Area-1
Area-3
Area-1
Area-2
Area-3
The desired output should be like this:
Area-1
Entity-1
Entity-2
Area-2
Entity-3
Area-3
Entity-4
Entity-5
Entity-6
To achieve this result, how can I modify the "createSubTree" function to ensure each entity's name is displayed correctly when called recursively here:
"children": createSubTree(level-1, setNumberOfChildren(getName(i),i), prefix + i +".")});