[英]Show Jason Data in Tree like structure in angular
i have a JSON
which is containing dynamic.我有一个包含动态的JSON
。 So how to show JSON
data into GUI tree structure ie expand and collapse in html page in angular?那么如何将JSON
数据显示到 GUI 树结构中,即在 angular 的 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": []
}
]
}
]
}
]
}
You can use the components available in angular like ngx-treeview,Kendo UI for Angular.您可以使用 angular 中可用的组件,例如 ngx-treeview、Angular 的 Kendo UI。 Below are the links- For Kendo UI以下是链接-对于 Kendo UI
Save this json to a variable将此 json 保存到变量
let data = YOUR_JSON ;
Use it in html as follows:在 html 中使用如下:
Sample tag:示例标签:
<p> examName: {{data.examName}} </p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.