Skip to content

How to dynamically and efficiently populate the angular tree nodes #118

@tron88888

Description

@tron88888

So let's say I have a list of filepaths in an Arraylist.

Arraylist<String> list = new Arraylist<String>();
list.add("folder1 > folder2 > folder3 > file1.jpg");
list.add("folder1 > folder2 > folder3 > file2.jpg");

Are there anyway to efficiently transform this list of filepaths into the node structure at my Java side.

Here's what I did at my Java API side.

@RequestMapping(value = "/retrieveTreeNodes", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
public Object[] retrieveTreeNodes() {
       JSONArray jsonArray = new JSONArray();
       int index=0;
       for(int i=0; i<list.size();i++){
            jsonArray.put(function(list.get(i), index, jsonArray));
       }
       JacksonHandle jacksonHandle = new JacksonHandle();
       try{
           return jacksonHandle.getMapper().readValue(jsonArray.toString(), Object[].class);
        }catch(Exception e){}
}

public JSONObject function(String str, int index, JSONArray jsonArray) {
	String[] paths = str.split(">");						
	return pathsToJSONObject(paths, index, jsonArray);		
}
	
public JSONObject pathsToJSONObject(String[] paths, int index, JSONArray jsonArray) {
	JSONObject jsono = new JSONObject();
		
	if(paths.length==1) {			
		jsono.put("name", paths[0].trim());
		jsono.put("id", index); index++;
                return jsono;
	} else {
		jsono.put("name",paths[0].trim());
		jsono.put("id", index); index++;			
		jsono.append("children", 
                    pathsToJSONObject(ArrayUtils.removeElement(paths,paths[0]),index,jsonarrayNodes));			
		return jsono;
	}
}

Eventually this Object[] will be parsed into my Angular website example:

component.ts as

this.restclient.getjson('/api/retrieveTreeNodes').subscribe(nodes=>{
           this.nodes = nodes;
           this.tree.treeModel.update();
          });

component.html as

<tree-root #tree [nodes]="nodes"></tree-root>

The Object expected to be returned:

[
 {
    "children": [
      {
        "children": [
          {
            "children": [
              {
                "name": "file1.jpg",
                "id": 3
              },
              {
                "name": "file2.jpg",
                "id": 4
              }
            ],
            "name": "folder3",
            "id": 2
          }
        ],
        "name": "folder2",
        "id": 1
      }
    ],
    "name": "folder1",
    "id": 0
  }
]

This is the expected result:

>folder1
    >folder2
        >folder3
           >file1.jpg
           >file2.jpg

But this is the actual Object[] returned:

[
 {
    "children": [
      {
        "children": [
          {
            "children": [
              {
                "name": "file1.jpg",
                "id": 3
              }              
            ],
            "name": "folder3",
            "id": 2
          }
        ],
        "name": "folder2",
        "id": 1
      }
    ],
    "name": "folder1",
    "id": 0
  },
  {
    "children": [
      {
        "children": [
          {
            "children": [
              {
                "name": "file2.jpg",
                "id": 7
              }              
            ],
            "name": "folder3",
            "id": 6
          }
        ],
        "name": "folder2",
        "id": 5
      }
    ],
    "name": "folder1",
    "id": 4
  }
]

and This is the actual result:

>folder1
    >folder2
        >folder3
           >file1.jpg
>folder1
    >folder2
        >folder3
           >file2.jpg

Where did I go wrong... what else should I do...

Adding on, what if one day I'll have to add a few new files to the list of filepaths e.g

list.add("folder1 > folder2 > file3.jpg");
list.add("folder4 > folder5 > folder6 > folder7 > file4.jpg");

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions