How to parse my kind of response to a treeview structure required for ngx-treeview

Question

I have the following response structure and I'm trying to either group or parse them to fit the ngx-treeview requesting data structure. Can somebody help me achieve it?

{
  "@type": "QueryResult",
  "result": [
    {
      "@type": "Folder",
      "id": "RjozNTg2ODk1",
      "name": "Training-OCTOBER-2020",
      "fullPath": "Training-OCTOBER-2020",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2ODk2",
      "name": "Process Library",
      "fullPath": "Training-OCTOBER-2020/Process Library",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2ODk3",
      "name": "Boomi Training",
      "fullPath": "Training-OCTOBER-2020/Process Library/Boomi Training",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTAz",
      "name": "Vijay",
      "fullPath": "Training-OCTOBER-2020/Vijay",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTA0",
      "name": "Vamsi",
      "fullPath": "Training-OCTOBER-2020/Vamsi",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTA1",
      "name": "Kranthi",
      "fullPath": "Training-OCTOBER-2020/Kranthi",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTA2",
      "name": "Akhil",
      "fullPath": "Training-OCTOBER-2020/Akhil",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTA4",
      "name": "File",
      "fullPath": "Training-OCTOBER-2020/Akhil/File",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTEw",
      "name": "FTP",
      "fullPath": "Training-OCTOBER-2020/Akhil/FTP",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTEy",
      "name": "Database",
      "fullPath": "Training-OCTOBER-2020/Kranthi/Database",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTEz",
      "name": "API",
      "fullPath": "Training-OCTOBER-2020/Vamsi/API",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTE0",
      "name": "Oracle",
      "fullPath": "Training-OCTOBER-2020/Vijay/Oracle",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTE4",
      "name": "MangoDB",
      "fullPath": "Training-OCTOBER-2020/Vijay/MangoDB",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTE5",
      "name": "HelloWorldAPI",
      "fullPath": "Training-OCTOBER-2020/Vamsi/HelloWorldAPI",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTIw",
      "name": "Glassdoor",
      "fullPath": "Training-OCTOBER-2020/Kranthi/Glassdoor",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg2OTQ2",
      "name": "Calculator",
      "fullPath": "Training-OCTOBER-2020/Akhil/Calculator",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg3MTA2",
      "name": "SFTP",
      "fullPath": "Training-OCTOBER-2020/Akhil/FTP/SFTP",
      "deleted": false
    },
    {
      "@type": "Folder",
      "id": "RjozNTg5MDAz",
      "name": "MiniCalc",
      "fullPath": "Training-OCTOBER-2020/Akhil/Calculator/MiniCalc",
      "deleted": false
    }
  ],
  "numberOfResults": 18
}

I want the treeview grouping based on the fullPath which represents the full path of the current folder name

ngx-treeview structure : https://github.com/leovo2708/ngx-treeview/blob/master/src/app/book/book.service.ts

I find most of the treeview libraries used in angular require a structure to be of a specific format and I'm totally blank on how to achieve it without much hurdles

ngx-treeview : https://www.npmjs.com/package/ngx-treeview

ngx-treeview demo : https://leovo2708.github.io/ngx-treeview/#/components

Really appreciate if anyone could provide atleast a hint on how to achieve this. Thanks!

score 0 · Answer 1 · answered Mar 14 '21 at 23:52

It does look as if your data is only one level. If that's the case, you could use the inbuilt pipe to convert your json to the TreeviewItem list by doing the following:

<ngx-dropdown-treeview
  [config]="config"
  [items]="items | ngxTreeview:'fullPath'"
  (selectedChange)="onSelectedChange($event)"
>
</ngx-dropdown-treeview>

How to parse my kind of response to a treeview structure required for ngx-treeview

1 Answers1