showing File System Structure using JSON in angularJS

Question

I need a JSON array which contains a sample file system with corresponding attributes(type, name, size, created, modified, last_accessed etc.). Then I want to plot it as a web file system in a tree structure. So, how will my JSON be look like & how should I make that tree in angularJS?

Editions :

I made JSON as -

{
    "data" : {
        "path":[
            "My Files",
            "Documents"
        ],
        "data" : [
            {
                "name": "Work Documents",
                "type": "folder",
                "owner": "me",
                "size": "",
                "modified": "May 24, 2017",
                "opened": "May 22, 2017",
                "created": "May 22, 2017",
                "extention": "",
                "location": "My Files > Documents",
                "offline": true,
                "children" : [
                    {
                        "name": "Public Documents",
                        "type": "folder",
                        "owner": "public",
                        "size": "",
                        "modified": "July 8, 2015",
                        "opened": "July 8, 2015",
                        "created": "July 8, 2015",
                        "extention": "",
                        "location": "My Files > Documents",
                        "offline": true
                    },
                    {
                        "name": "Ongoing projects",
                        "type": "document",
                        "owner": "Emily Bennett",
                        "size": "1.2 Mb",
                        "modified": "July 8, 2015",
                        "opened": "July 8, 2015",
                        "created": "July 8, 2015",
                        "extention": "",
                        "location": "My Files > Documents",
                        "offline": true,
                        "preview": "assets/images/etc/sample-file-preview.jpg"
                    },
                    {
                        "name": "Shopping list",
                        "type": "document",
                        "owner": "Emily Bennett",
                        "size": "980 Kb",
                        "modified": "July 8, 2015",
                        "opened": "July 8, 2015",
                        "created": "July 8, 2015",
                        "extention": "",
                        "location": "My Files > Documents",
                        "offline": true,
                        "preview": "assets/images/etc/sample-file-preview.jpg"
                    }
                ]
            },
            {
                "name": "Private Documents",
                "type": "folder",
                "owner": "me",
                "size": "",
                "modified": "July 8, 2015",
                "opened": "July 8, 2015",
                "created": "July 8, 2015",
                "extention": "",
                "location": "My Files > Documents",
                "offline": true
            }
        ]
    }
}

But how can I iterate it in html ? I'm currently displaying it, but unable to understand how to show 'Children' on click of folder. This is my html -

<tr ng-repeat="file in vm.data | filter:global.search" ng-click="vm.select(file)" ng-class="{'selected' : vm.selected === file}">
    <td class="file-icon">
        <i class="icon-{{file.type}}"></i>
    </td>
    <td class="name">{{file.name}}</td>
    <td class="type" hide show-gt-sm>{{file.type}}</td>
    <td class="owner" hide-xs>{{file.owner}}</td>
    <td class="size" hide-xs>{{file.size === '' ? '-': file.size}}</td>
    <td class="last-modified" hide show-gt-md>{{file.modified}}</td>
    <td class="show-details" hide-gt-md>
        <md-button class="md-icon-button sidenav-toggle" ng-click="vm.toggleDetails(file)" aria-label="Details" translate translate-attr-aria-label="FM.DETAILS">
            <md-icon md-font-icon="icon-information-outline"></md-icon>
        </md-button>
    </td>
</tr>

Answer 1

You can create a Json like this if it fullfil your requirements. Suppose you have a root dir of name root and it has child dirs books and videos.

  Var root = {
      dirName: "root",
     metadata: {
       size: " 1 gb",
       type: "dir",
       last_modified: " 24 may 2017",
       // Other attributes
   },
   children: [
              {
     dirName: "books",
     metadata: {
       size: " 10 mb",
       type: "dir",
       last_modified: " 24 may 2017",
       // Other attributes
       },
       Children:{}
       },

       { 
          dirName: "videos",
     metadata: {
       size: " 10 mb",
       type: "dir",
       last_modified: " 24 may 2017",
       // Other attributes
       } 
      }
              ]

}

You can now modify it as per your needs

Answer 2

我用它来显示树结构-https://github.com/eu81273/angular.treeview