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