json - 在树状结构中以角度显示 Jason 数据
问题描述
我有一个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": []
}
]
}
]
}
]
}
解决方案
将此 json 保存到变量中
let data = YOUR_JSON ;
在html中使用如下:
示例标签:
<p> examName: {{data.examName}} </p>
推荐阅读
- javascript - 如何在javascript中向body元素添加一个类?
- python - PyQt5(对于 Python)中 Qt for c++ 的“QT_CONFIG()”等价物是什么?
- c# - 在 C# 中使用分隔符进行 XML 反序列化 - 没有命名空间
- python - 从列表中的字典中提取值
- r - 如何有效地从点创建线串?
- chart.js - 如何在图表js中设置饼图样式?我想改变边框颜色、边框宽度并给它们阴影
- android - 在miui(小米)中检测暗模式
- php - 当用户在搜索栏中键入类似于使用模型的数据库表完成的方式时,如何过滤我的数组结果?
- javascript - nodejs不能在EJS中包含js文件
- grid - 从 Shield UI Grid 导出所有记录