Angular2 / PrimeNG - Push items into Treeview in a dynamic way

Question

I'm getting some Data from a server. The data looks like this:

abc/abca/abcsd/absc.dat

With amount of slashes being different from path to path.

Now I want to display it in a treeview using PrimeNG. This is how far I am:

for (var i = 0; i < this.test.length; i++) {
                let regex = /([^\/]+)\/?/g;
                let result: RegExpExecArray;

                while ((result = regex.exec(this.test[i])) !== null) {
                    console.log(result[1]);
                    if (result[1].search(".dat")>0) {
                        let item = {
                            "label": result[1],
                            "data": "Documents Folder",
                            "icon": "fa-file-text-o"
                        }
                        this.tree.push(item)
                    }
                    else {
                        let item = {
                            "label": result[1],
                            "data": "Documents Folder",
                            "expandedIcon": "fa-folder-open",
                            "collapsedIcon": "fa-folder",
                            "children": [{
                            }]
                        }
                        this.tree.push(item)
                    }
                }
            }

"test" is the data as described before. I am searching for the / with a regular expression. "result[1]" will give me the strings between the slashes. What I am able to do by now is checking whether its a .dat or not and then push it into the treeview with the treeviewstructure being something like this(example from above):

-abc
-abca
-abcsd
-absc.dat

As you can see I am not able to display the correct folderstructure. I can hardcode it with getting the amounts of slashes and then do a switch case to push it in the corrrect order, but I want int in a dynamic way.

So what I need is this in a dynamic way:

for 3 slashes:
   first item: this.items.push(item)
   sec. item : this.items[0].children.push(item)
   third. item: this.items[0].children[0].children.push(item)

for x slashes:
   ???

Any ideas?

score 0 · Answer 1 · answered Sep 13 '17 at 08:17

You need to create a recursive function (a function that calls itself if there are any child items), so that it would keep on traversing it like a tree. I'm just writing a general code to give you an idea.

    for (let role of roles) {
        if (role.parentID) continue;

        const roleNode = this.createTreeNodesFromEntities(role, (x: Role) => x.roles);

        this.roleNodes.push(roleNode);
    }


private createTreeNodesFromEntities<T extends { name: string }>(entity: T, getChildren: (x: T) => T[]): TreeNode {
    let result: TreeNode = {
        label: entity.name,
        data: entity,
        expanded: true,
        children: []
    }

    getChildren(entity).forEach((childPermission, index) => {
        let cPermissionNode = this.createTreeNodesFromEntities(childPermission, getChildren);
        result.children.push(cPermissionNode);
    })

    return result;
}

You can also refer to the answer here. Hope that it makes sense

Angular2 / PrimeNG - Push items into Treeview in a dynamic way

1 Answers1