Separating out files and folders

Before we create the components, we need to separate our files and folders in our structure, so we can easily identify and display our different types. Thanks to the .tag attribute on each item, we can split up our folders and files.

First, we need to update our structure data property to be an object containing both the files and the folders array:

      data() {
        return {
          accessToken: 'XXXX',
structure: {
            files: [],
            folders: []
          },
          byteSizes: ['Bytes', 'KB', 'MB', 'GB', 'TB'],
          isLoading: true
        }
      }

This gives us the ability to append our files and folders to different arrays, meaning we can display them differently in our view.

The next step is to populate these arrays with the data of the current folder. All the following code takes place in the first then() function of the getFolderStructure method. 

Create a JavaScript loop to cycle through the entries and check the .tag property...