Angular app reading from a nested json structure - json

Question

I have an angular app which reads from a json that looks like the following:
[{
"category": {
"id": 40,
"name": "Category 1",
"parent": {
"id": 38,
"name": "Parent Category 1",
"parent": {
"id": 23,
"name": "Parent name",
"level": 1
},
"level": 2
},
"level": 3
},
"subcategory": {
"course_name": "Category Name 1",
"title": "Category Title",
}
},
{
"category": {
"id": 40,
"name": "Category 1",
"parent": {
"id": 38,
"name": "Parent Category 1",
"parent": {
"id": 23,
"name": "Parent name",
"level": 1
},
"level": 2
},
"level": 3
},
"subcategory": {
"course_name": "Category Name 2",
"title": "Category Title",
}
},
{
"category": {
"id": 40,
"name": "Category 1",
"parent": {
"id": 39,
"name": "Parent Category 2",
"parent": {
"id": 23,
"name": "Parent name",
"level": 1
},
"level": 2
},
"level": 3
},
"subcategory": {
"course_name": "Category Name 3",
"title": "Category Title",
}
}
]
I am trying to read this json and write it in the app such that the structure in the page looks like the following
Parent name
Parent Category 1
Category 1
Category Name 1, Category Title
Category name 2, Category Title
Parent Category 2
Category 1
Category Name 3, Category Title
How can i get this structure in angular? Here is the plunker of what i tried.

Answer 1

You need to summarize the data first. Then, you can repeat over the summaries to render parent level lists. Nested repeats can then conditionally display the children data.
The summary arrays (generated with a simple loop, or maybe a fancy library like lodash) might look like this:
$scope.parents = [{
"id": 23,
"name": "Parent name",
"level": 1
}]
$scope.parentCategories = [{
"id": 38,
"name": "Parent Category 1"
}, {
"id": 39,
"name": "Parent Category 2"
}]
$scope.categories = [{
"id": 40,
"name": "Category 1"
}]
Then you could use them like this:
<div ng-repeat="parent in parents">
<ul>
<li>{{parent.name}}
<ul ng-repeat="parentcategory in parentCategories">
<li>{{parentcategory.name}}
<ul ng-repeat="category in categories">
<li>{{category.name}}
<ul ng-repeat="program in programs"
ng-show="program.category.id == category.id">
<li ng-show="program.category.parent.id == parentcategory.id">
{{program.subcategory.course_name}} {{program.subcategory.title}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
If you want to try the code, here it is on Plunkr.