在树中显示杰森数据，就像角度结构一样

Question

我有一个包含动态的JSON。那么如何将JSON数据显示为GUI树结构，即在角度的html页面中展开和折叠？

{
"id": 13,
"examName": "tt2",
"examStatus": "INCOMPLETE",
"examConfigStatus": {
"status": "COMPLETED",
"generalConfigStatus": "COMPLETED",
"instructConfigStatus": "COMPLETED",
"timeConfigStatus": "COMPLETED",
"marksConfigStatus": "COMPLETED",
"questionPaperStatus": "COMPLETED",
"numQuestionsExam": 12,
"questionPapers": [
{
"status": "COMPLETED",
"launguage": "ENGLISH",
"minNumSetsPerLanguage": 2,
"questionSets": [
{
"status": "COMPLETED",
"setName": "SET_A",
"numQuestions": 12
},
{
"status": "COMPLETED",
"setName": "SET_B",
"numQuestions": 12
}
]
}
]
},
"shiftStatusList": [
{
"shiftId": 9,
"shiftName": "Shift1",
"shiftDate": "2019-12-10",
"shiftStartTime": "09:00",
"shiftEndTime": "12:00",
"status": "INCOMPLETE",
"centreStatusList": [
{
"caId": 13,
"centreName": "ORNATE",
"status": "INCOMPLETE",
"numAvailableTerminals": 17,
"numAllocatedTerminals": 0,
"numFreeTerminals": 17,
"numApplicants": 0,
"moderators": [],
"hallStatusList": [
{
"hallName": "ORNATE",
"status": "COMPLETED",
"numAvailableTerminals": 17,
"numAllocatedTerminals": 0,
"supervisors": []
}
]
}
]
},
{
"shiftId": 10,
"shiftName": "shift2",
"shiftDate": "2019-12-10",
"shiftStartTime": "13:00",
"shiftEndTime": "16:00",
"status": "INCOMPLETE",
"centreStatusList": [
{
"caId": 12,
"centreName": "ORNATE",
"status": "INCOMPLETE",
"numAvailableTerminals": 17,
"numAllocatedTerminals": 0,
"numFreeTerminals": 17,
"numApplicants": 0,
"moderators": [],
"hallStatusList": [
{
"hallName": "ORNATE",
"status": "COMPLETED",
"numAvailableTerminals": 17,
"numAllocatedTerminals": 0,
"supervisors": []
}
]
}
]
}
]
}

Answer 1

您可以使用 angular 中可用的组件，例如 ngx-treeview，Kendo UI for Angular。 以下是链接- 对于剑道用户界面

对于 ngx 树视图

Answer 2

将此 json 保存到变量

let data = YOUR_JSON ;

在 html 中使用它，如下所示：

示例标签：

<p> examName: {{data.examName}} </p>