how to create tree from flat array using in Angular

Question

I need to show a tree from a flat array of data using Angular and I'm open to use any package to render the tree. as a user, I should be able to click on a node and find out details such as node ID and title. the tree should be expanded on load but users should be able to collapse parent nodes as they wish. my node data model looks like below:

export class Node {
    nodeID: number;
    title: string;
    parentNodeID: number;
}

and my data looks like this:

public Nodes: Node[] = [
    {
        nodeID: 1;
        title: parent1;
        parentNodeID: null;
    },
    {
        nodeID: 2;
        title: child1;
        parentNodeID: 1;
    },
    {
        nodeID: 3;
        title: child2;
        parentNodeID: 1;
    }
]

Ramin Ahmadi · Accepted Answer · 2020-05-07 03:07:12Z

0

you need a recursive algorithm that looks loops through your flat array and maps parentNodeID to Node to generate tree structure and then use a tree component, for example angular-tree-component, to render your tree. I made a demo on stackblitz. have a look and let me know if it helped. https://stackblitz.com/github/ramin-ahmadi/Flat-Tree

answered May 7, 2020 at 3:07

Ramin Ahmadi

6395 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Quentin Grisel · Accepted Answer · 2020-05-07 01:41:24Z

0

There is plenty of package that could do the job, for example This one. I did not tried it but seems easy to use. If you can, change your keys in your array. Else, then just map your items into another array, something like:

const newArray = array.map(item =>({
      id: item.nodeID,
      name: item.title,
      children: array.filter(el => el.parentNodeID === parentId), // Not sure about that, but this is the idea
    })
  );

newArray wil be the data provided to your three.

answered May 7, 2020 at 1:41

Quentin Grisel

5,0171 gold badge13 silver badges19 bronze badges

2 Comments

John T Over a year ago

Thanks Quentine. what is the complexity of your solution?

Quentin Grisel Over a year ago

What do you mean by complexity ? As I said i didn't tried it, but it look kinda easy. Look at the doc here: angular2-tree.readme.io/docs. Now, it was an example, find the tree builder that suits your needs :)

Collectives™ on Stack Overflow

how to create tree from flat array using in Angular

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related