'Creating a treeview of google drive folders

I want to create a JSON database of folders (only) from google drive for a tree view pane, I have tried to extract the database using google sheets using this code

var level=0;
getFnF()

function getFnF(folder) {
  var folder= folder || DriveApp.getFolderById(" ID HERE");
  var sh=SpreadsheetApp.getActiveSheet();
  var subfolders=folder.getFolders() 
  while(subfolders.hasNext()) {
    var subfolder=subfolders.next();
    var forg=sh.getRange(sh.getLastRow() + 1,level + 1);
    forg.setValue(Utilities.formatString(subfolder.getName() + "      "+ subfolder.getId()));
    level++;
    getFnF(subfolder);
  }
  level--;
}

but i stuck on how transforming it to a database such this formate :

export const treeMenu = [
  {
    key: "Folder id",
    label: "folder1",
    nodes: [
      {
        key: "Folder id",
        label: "sub-folder",
        nodes: [
          {
            key: "Folder id",
            label: "sub-sub-folder",
            nodes: [],
          },
        ],
      },
    ],
  },
  {
    key: "Folder id",
    label: "folder",
  },
];

Solution 1:^[1]

You can do it using recursion:

function myFunction() {


  var getSubfolders = subfoldersObject => {
    var subfolders = []; 
    while(subfoldersObject.hasNext()){
      subfolders.push(subfoldersObject.next())
    } 
    return subfolders;
  }

  var rootFolder = DriveApp.getRootFolder();
  
   
  function recursive(folder){

    var subFolders = getSubfolders(folder.getFolders());
    return {id: folder.getId(), label: folder.getName(),
             nodes: subFolders.map(folder => recursive(folder))}
  }

  const treeMenu = recursive(rootFolder);
}

The trick is to call the same function on every folder you encounter. That will mean calling the function inside itself, which is precisely what we want: to look for folders inside looking for folders inside looking for folders... until we hit a dead end and we come back up one level.

Solution 2:^[2]

Here is a complete functional solution

function myTreeFoldersV2() {
  const rootFolder = DriveApp.getRootFolder();
  let result = []
  result.push({ name: rootFolder.getName(), id: rootFolder.getId(), pid: 'root', nodes: [] })
  recursive(rootFolder)
  function recursive(parentFolder) {
    var childFolders = parentFolder.getFolders();
    while (childFolders.hasNext()) {
      var childFolder = childFolders.next();
      result.push({ name: childFolder.getName(), id: childFolder.getId(), pid: parentFolder.getId(), nodes: [] })
      recursive(childFolder);
    }
  }
  console.log(JSON.stringify(arr2tree(result), null, 2))
}
function arr2tree(ar) {
  var json = [ar[0]]
  recursive(json[0])
  function recursive(obj) {
    obj.nodes.push(ar.filter(a => a.pid == obj.id))
    obj.nodes = obj.nodes.flat()
    for (item in obj.nodes) { recursive(obj.nodes[item]) }
  }
  return json;
}

Solution 3:^[3]

If you use module in JS file you can try to put type="module" in script tag.

<script type="module" src="{% static 'assets/js/main.js' %}"></script>

Solution 4:^[4]

Your directory structure does not seem right. You do need an app. What you've created so far is a project, and their is a difference as noted in What’s the difference between a project and an app in Django world?.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Oriol Castander
Solution 2	Mike Steelson
Solution 3	Matteo Giuntoni
Solution 4	raphael

'Creating a treeview of google drive folders

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]