Path string data into a tree-level object, path to JSON tree

Because react and ant-design are used in the project, when you use the tree-tree control, you need to
Similar to the following data,

ConstTreedata=[{  title: ' 0-0 ',  Key: ' 0-0 ',  Children:[{    title: ' 0-0-0 ',    Key: ' 0-0-0 ',    Children:[{ title: ' 0-0-0-0 ', Key: ' 0-0-0-0 ' },      { title: ' 0-0-0-1 ', Key: ' 0-0-0-1 ' },      { title: ' 0-0-0-2 ', Key: ' 0-0-0-2 ' },],  }];

But the background transfer is often the following path string array, which requires us to convert to a tree-level object.

 varArr=["root/",    "root/a/",    "Root/a/new_b.png",    "root/a/qa/",    "root/a/qa/new text Document (3). txt",    "Root/asdfasdfasdfasdfasdfasdfasdf.txt",    "Root/b.png",    "Root/instqj_gfzqhk.exe",    "Root/jupyter_notebook.png",    "Root/new_b.png",    "Root/output/new_b.png",    "Root/soffice.exe",    "Root/ti/asdfasdfasdfasdfasdfasdfasdf.txt",    "Root/watermark.zip",    "root/the 13th Five-year plan for national Economic and social development of the People's Republic of China. pdf",    "root/China made 2025"%28 full text%29.pdf ",    "root/new text Document (3). txt",    "root/new text document. txt",    "root/a smile. docx",    "root/Ricoh C2011SP.exe"]

Then we'll move on.

ConstPathtotree=(input)= {    varOutput=[];     for(varI= 0;I< input.length;I++){        varChain=Input[i].Split("/");        varCurrentNode=Output;         for(varJ= 0;J< chain.length;J++){            if(Chain[j]=== "'){                 Break;            }            varWantednode=CHAIN[J];            varLastnode=CurrentNode;             for(varK= 0;K< CurrentNode.length;K++){                if(Currentnode[k].title ==Wantednode){CurrentNode=CURRENTNODE[K].Children;                     Break;                }            }            if(Lastnode==CurrentNode){                varNewNode=CURRENTNODE[K]= { Key:Input[i], title:Wantednode, Children:[]};CurrentNode= NewNode.Children;            } Else {                Delete CurrentNode.Children            }        }    }    returnOutput;}Console.Log(Pathtotree(arr))

Got the results we wanted.

Light is not enough, we use tree-tree control in ant-design, we can not let the lowest level have children property, at the same time, we may also be able to set an additional requirement: All file names cannot exceed a certain number of characters.
In addition, because my project is uploaded to Amazon S3, some folders will not be returned to me, such as this file "Root/ti/asdfasdfasdfasdfasdfasdfasdf.txt" does not return "root/ti/", so we have to add a hierarchical data.
We'll walk through this tree object here, and simply deal with it.

ConstTraverseTree= function(data){    return Data.Map(item)= {        //If there is a problem with the rendering of the same key,react, you have to deal with it.          LetChain= Item.Key.Split('/');        if(Item.title !== chain.Slice(-1)[0]){            Item.Key = chain.Slice(0, -1).Join('/')}        Item.title = Item.title.length > Ten ? Item.title.substring(0, 7)+ "...":Item.title        if(Item.Children.length > 0){            TraverseTree(Item.Children)returnItem} Else {            Delete Item.Children            returnItem}    })}Console.Log(TraverseTree(Pathtotree(arr)))

Output results

Path string data into a tree-level object, path to JSON tree