Show Jason Data in Tree like structure in angular

Question

i have a JSON which is containing dynamic. So how to show JSON data into GUI tree structure i.e. expand and collapse in html page in angular ?

{
    "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 recursive ngFor.. https://stackoverflow.com/questions/35733186/angular2-ul-li-json-tree-recursive-in-ngfor — Hussain, Sep 23 '19 at 11:41

score 0 · Answer 1 · answered Sep 23 '19 at 11:44

0

You can use the components available in angular like ngx-treeview,Kendo UI for Angular. Below are the links- For Kendo UI

For ngx-tree view

answered Sep 23 '19 at 11:44

Ms.KV

214
2
10

Please do not answer questions like this where the OP has made zero effort. It just makes them go on to ask [even more low-effort questions](https://stackoverflow.com/questions/61383035/protect-existing-pdf-file-in-folder-with-password-and-email-as-attachment-in-asp) and degrades the quality of the site as a whole. – ProgrammingLlama Apr 23 '20 at 08:55

score 0 · Answer 2 · edited Sep 23 '19 at 13:41

0

Save this json to a variable

let data = YOUR_JSON ;

Use it in html as follows:

Sample tag:

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

edited Sep 23 '19 at 13:41

Keren Caelen

1,466
3
17
38

answered Sep 23 '19 at 12:17

Maryam Rajabi

39
1
5

Please do not answer questions like this where the OP has made zero effort. It just makes them go on to ask [even more low-effort questions](https://stackoverflow.com/questions/61383035/protect-existing-pdf-file-in-folder-with-password-and-email-as-attachment-in-asp) and degrades the quality of the site as a whole. – ProgrammingLlama Apr 23 '20 at 08:55

Show Jason Data in Tree like structure in angular

2 Answers2