Is there a better way, or the correct one to have this approach for a JSON object that hast the following structure? (it's only a portion of my object, the most important one)
{
"Questions": [
{
"AnswerType": "single-choice",
"Answers": [
{
"AnswerValue": null,
"Description": "Yes",
"ID": 124877,
"Questions": [
{
"AnswerType": "multiline",
"Answers": [
{
"AnswerValue": null,
"Description": null,
"ID": 124879,
"Questions": []
}
],
"Description": "Other text",
"ID": 37932,
"SelectedAnswers": []
},
{
"AnswerType": "singleline",
"Answers": [
{
"AnswerValue": null,
"Description": null,
"ID": 124880,
"Questions": []
}
],
"Description": "Hoeveelperweek?",
"ID": 37933,
"SelectedAnswers": []
}
]
},
{
"AnswerValue": null,
"Description": "No",
"ID": 124878,
"Questions": []
}
],
"Description": "Question text",
"ID": 37931,
"SelectedAnswers": []
}
]
}
AngularJS template for parsing it recursively:
<div ng-repeat="question in myData.Questions">
{{question.Description}}
<div ng-repeat="answer in myData.Questions[$index].Answers">
<a href="/api/flow.js?q=https%3A%2F%2Fcodereview.stackexchange.com%2Fquestions%2F75357%2Fparse-recursively-a-json-object-with-angularjs%23" ng-click="answerQuestion(answer)">{{answer.Description}}</a>
<div ng-repeat="qanswer in myData.Questions[$index].Answers[$index].Questions">
<a href="/api/flow.js?q=https%3A%2F%2Fcodereview.stackexchange.com%2Fquestions%2F75357%2Fparse-recursively-a-json-object-with-angularjs%23" ng-click="answerQuestion(qanswer)">{{qanswer.Description}}</a>
</div>
</div>
</div>
The structure can go infinitely. This is the structure that is being repeated over and over:
Questions [] -Answers [] --Answer [i] ---Questions []
Angular
directive recursively, i.e. calling itself in its template. \$\endgroup\$