Looking for a solution to handle dynamic JSON responses using a single angular template? Check out these two examples of the same template with different JSON responses, both somewhat similar. How can we handle unknown levels in a JSON response within the same template?
{"book": {
"title": "Book Title",
"chapters": [
{
"title": "Chapter One",
"units": [
{
"title" : "Unit One",
"sections": [
{"title" : "Section One"},
{"title" : "Section Two"},
{"title" : "Section Three"}
]
},
{"title" : "Unit Two"},
{"title" : "Unit Three"}
]
},
{"title": "Chapter Two"},
{"title": "Chapter Three"}
]
}};
{"book": {
"title": "Book Title",
"chapters": [
{
"title": "Chapter One",
"sections": [
{"title" : "Section One"},
{"title" : "Section Two"},
{"title" : "Section Three"}
]
},
{"title": "Chapter Two"},
{"title": "Chapter Three"}
]
}};
Template to handle these responses:
<div ng-repeat="item in book">
{{item.title}}
<ul>
<li ng-repeat="chapter in item.chapters">
{{chapter.title}}
<ul>
<li ng-repeat="unit in chapter.units">
{{unit.title}}
<ul>
<li ng-repeat="section in unit.sections">
{{section.title}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>