2

I have some JSON data coming from the server which I have to display in the Tree Table on the UI. I am using the PrimeNG Tree Table component for it. The problem I am facing is that the Tree table requires the data in a particular format.

For example:

This is the data I am getting from the server:

{
    "records": [
        {
            "name":"Documents",
            "size":"75kb",
            "type":"Folder",
            sub-folder: [
                {
                    "name":"Work",
                    "size":"55kb",
                    "type":"Folder"
                },
                {
                    "name":"Expenses.doc",
                    "size":"30kb",
                    "type":"Document"
                }
            ]
        },
        {
            "name":"Documents",
            "size":"75kb",
            "type":"Folder",
            sub-folder: [
                {
                    "name":"Work",
                    "size":"55kb",
                    "type":"Folder"
                }
            ]
        }
    ]
}

But, Tree Table would require the data in the following format:

{
    "data":
    [
        {
            "data":{
                "name":"Documents",
                "size":"75kb",
                "type":"Folder"
            },
            "children":[
                {
                    "data":{
                        "name":"Work",
                        "size":"55kb",
                        "type":"Folder"
                    },
                    "children":[
                        {
                            "data":{
                                "name":"Expenses.doc",
                                "size":"30kb",
                                "type":"Document"
                            }
                        },
                        {
                            "data":{
                                "name":"Resume.doc",
                                "size":"25kb",
                                "type":"Resume"
                            }
                        }
                    ]
                }
            ]
        }
    ]
}

This becomes difficult to do manually as the complexity of JSON that I am parsing is great. Is there a way to auto map JSON data to how Tree Table wants it?

Here is what a Tree Node interface looks like. Tree Node represents one row of the Tree table.


export interface TreeNode {
    data?: any;
    children?: TreeNode[];
    leaf?: boolean;
    expanded?: boolean;
}
Mehul Solanki
  • 21
  • 3

1 Answers1

2

I have faced the same issue, unfortunately, you have to write your own JSON parser to change the format before binding it to the tree. Because primeng tree template is bound up with those specific keys and actions based on that binding.

Abhinav Kumar
  • 2,883
  • 1
  • 17
  • 30