How to convert my JSON to PrimeNg tree format and bind data between the two tree stuctures

UI Components for Angular
Post Reply
bird
Posts: 3
Joined: 08 Oct 2020, 16:26

14 Oct 2020, 15:16

I have a JSON repsonse in an array of objects structure like the following:

Code: Select all

[
   {
      "id":1,
      "title":"My first title",
      "comments":[
         {
            "id":1,
            "comment":"onecomment"
         },
         {
            "id":2,
            "comment":"another comment"
         }
      ],
      "children":[
         {
            "id":2,
            "title":"My first child of 1",
            "comments":[
               {
                  "id":100,
                  "comment":"a comment"
               }
            ],
            "children":[
               {
                  "id":5,
                  "title":"grand child of 1 parent 2",
                  "comments":[
                     {
                        "id":100,
                        "comment":"a comment"
                     }
                  ],
                  "children":[
                     
                  ]
               },
               {
                  "id":6,
                  "title":"grand child of 1 parent 2",
                  "comments":[
                     {
                        "id":200,
                        "comment":"comment 200"
                     },
                     {
                        "id":201,
                        "comment":" comment 201"
                     }
                  ],
                  "children":[
                     
                  ]
               }
            ]
         },
         {
            "id":3,
            "title":"My first child of 2",
            "comments":[
               {
                  "id":200,
                  "comment":"comment 200"
               },
               {
                  "id":201,
                  "comment":" comment 201"
               }
            ],
            "children":[
               
            ]
         }
      ]
   }
]
I am trying
1) to find an example how to create another array with the format primeNg tree expects which is like this ( from here: https://github.com/primefaces/primeng/b ... files.json ):

Code: Select all

{
    "data": [
        {
            "key": "0",
            "label": "Documents",
            "data": "Documents Folder",
            "icon": "pi pi-fw pi-inbox",
            "children": [{
                "key": "0-0",
                "label": "Work",
                "data": "Work Folder",
                "icon": "pi pi-fw pi-cog",
                "children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }]
            },
            {
                "key": "0-1",
                "label": "Home",
                "data": "Home Folder",
                "icon": "pi pi-fw pi-home",
                "children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }]
            }]
        },
        {
            "key": "1",
            "label": "Events",
            "data": "Events Folder",
            "icon": "pi pi-fw pi-calendar",
            "children": [
                { "key": "1-0", "label": "Meeting", "icon": "pi pi-fw pi-calendar-plus", "data": "Meeting" },
                { "key": "1-1", "label": "Product Launch", "icon": "pi pi-fw pi-calendar-plus", "data": "Product Launch" },
                { "key": "1-2", "label": "Report Review", "icon": "pi pi-fw pi-calendar-plus", "data": "Report Review" }]
        },
        {
            "key": "2",
            "label": "Movies",
            "data": "Movies Folder",
            "icon": "pi pi-fw pi-star",
            "children": [{
                "key": "2-0",
                "icon": "pi pi-fw pi-star",
                "label": "Al Pacino",
                "data": "Pacino Movies",
                "children": [{ "key": "2-0-0", "label": "Scarface", "icon": "pi pi-fw pi-video", "data": "Scarface Movie" }, { "key": "2-0-1", "label": "Serpico", "icon": "pi pi-fw pi-video", "data": "Serpico Movie" }]
            },
            {
                "key": "2-1",
                "label": "Robert De Niro",
                "icon": "pi pi-fw pi-star",
                "data": "De Niro Movies",
                "children": [{ "key": "2-1-0", "label": "Goodfellas", "icon": "pi pi-fw pi-video", "data": "Goodfellas Movie" }, { "key": "2-1-1", "label": "Untouchables", "icon": "pi pi-fw pi-video", "data": "Untouchables Movie" }]
            }]
        }
    ]
}
with all these "data": , key, label etc

and

2) how to relate the data of those two trees
For example if I click on the node of my ID:2 of the primeNG tree, how can I also have the comments array?

I am searching for an example everywhere but I cannot find anything. Have anoyne already done this and want to help please?

shankprimeng
Posts: 2
Joined: 16 Oct 2020, 08:55

17 Oct 2020, 08:26

Make sure whatever parent child arrays you want, jus follow label children hierarchy.

You can use create your JSON format in this way:

Code: Select all

{
   "id":1,
   "title":"My first title",
   "label":"test user",
   "children":[
      {
         "label":"poll 1 title",
         "children":[
            {
               "label":"comment1",
               "id":"1",
               "children":[
                  {
                     "label1 grandchild":"comment1 grand child"
                  }
               ]
            },
            {
               "label":"comment2",
               "id":"2",
               "children":[
                  {
                     "label2 grandchild":"comment2 grand child"
                  }
               ]
            }
         ]
      }
   }
]
}

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 8 guests