how to list all the objects from AWS with the type?

Question

In my AWS s3 bucket I have a folder called my-folder which having 2 files and one folder below is the structure

my-folder
 ------newdata.pdf
 ------backtick.doc
 ------jpg
        ------red-rose.jpg

I want to show the same way in front view for users for that I a using angularjs directive. click here based on my response value I have to change the json using aws-sdk I am fetching all the objects here is the code

router.get('/getall', function(req, res) 
  {
      var params = {
        Bucket: "bucket-name", 
        Prefix: "my-folder/"
       };
       s3.listObjects(params, function(err, data) {
         if (err) console.log(err, err.stack); // an error occurred
         else
         {     
           console.log(data.Contents);
           res.json(data.Contents);       
         }
       });
  });

this will response like this

[ { Key: 'my-folder/',
    LastModified: 2017-10-31T07:51:22.000Z,
    ETag: '"d41d8cd98f00b204e9800998ecf8427e"',
    Size: 0,
    StorageClass: 'STANDARD',
    Owner: 
     { DisplayName: 'gsdg',
       ID: 'fdfca70edcffab900fa878002905e80e31e119bf6c19beb0d1b3c278aac68789' } },
  { Key: 'my-folder/newdata.pdf',
    LastModified: 2017-10-31T07:50:57.000Z,
    ETag: '"54fa8a287448e8e9aac7fb56ea1ed6c4"',
    Size: 9296,
    StorageClass: 'STANDARD',
    Owner: 
     { DisplayName: 'gsdg',
       ID: 'fdfca70edcffab900fa878002905e80e31e119bf6c19beb0d1b3c278aac68789' } },
  { Key: 'my-folder/backtick.doc',
    LastModified: 2017-10-31T07:51:02.000Z,
    ETag: '"053626b75eb5db630b994959a3e6754e"',
    Size: 436120,
    StorageClass: 'STANDARD',
    Owner: 
     { DisplayName: 'gsdg',
       ID: 'fdfca70edcffab900fa878002905e80e31e119bf6c19beb0d1b3c278aac68789' } },

  { Key: 'my-folder/jpg/',
    LastModified: 2017-10-31T11:09:50.000Z,
    ETag: '"d41d8cd98f00b204e9800998ecf8427e"',
    Size: 0,
    StorageClass: 'STANDARD',
    Owner: 
     { DisplayName: 'gsdg',
       ID: 'fdfca70edcffab900fa878002905e80e31e119bf6c19beb0d1b3c278aac68789' } },
  { Key: 'my-folder/jpg/red-rose.jpg',
    LastModified: 2017-10-31T11:10:16.000Z,
    ETag: '"c4739c72ec3e76ca32a22e84a51e8f7c"',
    Size: 125014,
    StorageClass: 'STANDARD',
    Owner: 
     { DisplayName: 'gsdg',
       ID: 'fdfca70edcffab900fa878002905e80e31e119bf6c19beb0d1b3c278aac68789' } },

In angular js I have tried like this

angular.forEach(response.data, function(value, key)
                    {
                       //var arraoffiles = value.Key.split('/');
                       //console.log(arraoffiles);
                       if(arraoffiles.length == 2 && arraoffiles[1] != '')
                       {
                         $scope.roleList.push({ "roleName": arraoffiles[0],
                                           "children": [{
                                                "roleName": arraoffiles[1],
                                                "children": []
                                            }]
                                         });   

But its not a proper way to display the content. Please help me to find a solution

Answer 1

Here is something i create based on your data not sure how much scalable it is

var data=[
  { Key: 'my-folder'},
  { Key: 'my-folder/newdata.pdf'},
  { Key: 'my-folder/jpg/red-rose.jpg'},
   {Key: 'my-folder/backtick.doc'}  
]

var ret=[];

data.forEach(
  i=>{
    var arr = i.Key.split('/');
    var root =searchChild(ret,arr[0]);
    arr.shift();
    if(arr.length>0){
     var child= searchChild(root.children,arr[0]); 
      arr.shift();
       if(arr.length>0){
       var subChild= searchChild(child.children,arr[0]); 
       }
    }
  }
  )
  
  
  function searchChild(root,value){
    if(!root.some(i=>i.roleName == value)){
      var i={
        roleName:value,
        roleId:value,
        children:[]
      };
      root.push(i)
      return i;
    }
    return root.find(i=>i.roleName == value)
  }
  
  console.log(ret)

Working demo