2

I need to create a list of files and folders from a JSON object. Folder structure can go very deep but in my example I have only nested 3 levels. eg:

  • Files
  • Folder
    • Files
    • subFolder
      • Files
      • subSubFolder
        • Files

Here is some sample JSON:

{
    "List": [
        {
            "id": 0,
            "files": [
                {
                    "name": "Test-1.docx",
                    "id": 80
                },
                {
                    "name": "Test-2.docx",
                    "id": 81
                }
            ],
            "folders": [
                {
                    "name": "Folder Top Level",
                    "folders": [
                        {
                            "name": "Folder Sub Level",
                            "folders": [
                                {
                                    "name": "Folder Sub Sub Level",
                                    "folders": [],
                                    "files": [
                                        {
                                            "name": "Test-7.docx",
                                            "id": 87
                                        },
                                        {
                                            "name": "Test-8.docx",
                                            "id": 88
                                        }
                                    ]
                                }
                            ],
                            "files": [
                                {
                                    "name": "Test-5.docx",
                                    "id": 85
                                },
                                {
                                    "name": "Test-6.docx",
                                    "id": 86
                                }
                            ]
                        }
                    ],
                    "files": [
                        {
                            "name": "Test-3.docx",
                            "id": 83
                        },
                        {
                            "name": "Test-4.docx",
                            "id": 84
                        }
                    ]
                }
            ]
        }
    ]
}

Given that I don't know how many levels my JSON can go, how would I structure the ng-repeat?

<div>
  <ol ng-model="list">
    <li ng-repeat="file in list.files">{{file.name}}</li>        
    <li ng-repeat="folder in list.folders">
        {{folder.name}}
      <ol ng-model="folder.folders">
        <li ng-repeat="folder in folder.folders" ng-if="folder.folders.length > 0">
            {{folder.name}}
        </li>
        <li ng-repeat="file in folder.files" ng-if="folder.files.length > 0">
            {{file.name}}
        </li>
      </ol>
    </li>
  </ol>
</div>

Is there a better way to do this?

uknowit2
  • 449
  • 1
  • 7
  • 20
  • 1
    google for angular recursive directive, should find plenty of results – charlietfl Jul 21 '15 at 00:39
  • Look over the answers [here](http://stackoverflow.com/questions/18408496/looping-through-deep-objects-in-ng-repeat). – WGS Jul 21 '15 at 00:41
  • 1
    For example: [here](http://stackoverflow.com/a/28077301/968155) or [here](http://stackoverflow.com/a/15663410/968155) – New Dev Jul 21 '15 at 00:41

1 Answers1

1

Thanks for the links, they were helpful. In the end this did the trick.

<script type="text/ng-template" id="field_renderer.html">
    <ol ng-model="folder.folders">
      <strong>{{folder.name}}</strong>
      <ol><li ng-repeat="file in folder.files">{{file.name}}</li></ol>
      <li ng-repeat="folder in folder.folders" ng-include="'field_renderer.html'"></li>
    </ol>
</script>

<ol ng-model="list">
    <li ng-repeat="folder in list" ng-include="'field_renderer.html'"></li>
</ol>
uknowit2
  • 449
  • 1
  • 7
  • 20