CODEWITHSUNDEEP
ionic-framework
karvonen
karvonen

Reputation: 676

Ionic 5 Directory tree dynamically

I have done a simple JavaScript file browser which shows the contents of each directory, loading the subdirectory contents from the backend using an AJAX request when the directory name is clicked. Loading the full tree is out of the question. The directory contents are sent in JSON. The directory is something like the one below and cannot be loaded as a whole recursively due to the number of directories and files. The (imaginary) directory structure is simple, but it can have several nested levels:

docs
    assemblies
       2019-07
           doc-6811.txt
           instructions-6811.pdf
        2019-08
           doc-7012.txt
           instructions-7012.pdf
    ...
    invoices
       2019-07
           invoice-6811.pdf
       2019-0
           invoice-7012.pdf
    tickets
        2019-07
            ticket-98141.txt

The items for each directory are in an array of JS Objects:

[{
   name: '2019-07',
   isDirectory: true,
   fullPath: "/mnt/samba/docs/assemblies/2019-07"       
},
{
   name: '2019-08',
   isDirectory: true,
   fullPath: "/mnt/samba/docs/assemblies/2019-08"
} ...
]

There are files as well, of course, but they are not a problem. Now I need to do the same in Ionic but, I am totally lost with the starting point. The top directory renders nicely and the current simple template (I call it a template) is something like this:

<ion-content>
    <ion-list>
        <ion-item-sliding *ngFor="let d of directories">
        <ion-item (click)="openFolder(d)">  <!-- just an example call --->
            <ion-icon name="folder"      slot="start" *ngIf="d.isdirectory"></ion-icon>
            <ion-icon name="triangle"    slot="start" *ngIf="!d.isdirectory"></ion-icon>
            <ion-label text-wrap>
            {{ d.name }}
            <p>{{ d.fullPath }}</p>
            </ion-label>
            
            <!-- THIS is where the directory contents should appear using 
                the same structure as this template -->
            
        </ion-item>

        </ion-item-sliding>
    </ion-list>
</ion-content>

What the code should do is simply fetch the data from the backend and bind it to an array variable, which would then be rendered below to the spot given above. Can this be done in Angular, or is using some other framework any easier? I assume there is a component approach of some sort available, but it should be totally dynamic and fetching plus rendering of one directory should take place per request.

Fetching the directories is a simple task and I get the array just fine. However, I have not been able to get any rendering done yet. Any alternatives and/or pointers are welcome.

Upvotes: 0

Views: 323

Answers (1)

Jay Pagnis
Jay Pagnis

Reputation: 1110

Your JSON has to be a recursive JSON. By that I mean,

{ "items": [
    {
      "name": "ABC1",
      "isDirectory": true,
      "fullPath": "/mnt/samba/docs/assemblies/2019-07",
      "children":[
        {
          "name": "ABC11",
          "isDirectory": true,
          "fullPath": "/mnt/samba/docs/assemblies/2019-08"
        }, 
        {
          "name": "ABC12",
          "isDirectory": true,
          "fullPath": "/mnt/samba/docs/assemblies/2019-08"
        }
      ]  
    },
    {
      "name": "ABC2",
      "isDirectory": true,
      "fullPath": "/mnt/samba/docs/assemblies/2019-08"
    }
  ] 
}

If it can be this way, you can handle the same using recursive ng-template A sample of the same is as given in this link.

Click here to view the link.

A little Google on recursive ng-template can also help. :)

I sincerely hope that this helps.

Upvotes: 1

Related Questions