Flatten a tree into an array in Angular

Question

I have created a tree, in Angular, from an array with property like id and parentId, using the following algorithm:

  public setTree(_searchResponses):void{
    let treeSearchResponses: Tree[] = [];
    _searchResponses.map((searchResponse) => {
      let treeNode:Tree = new Tree();
      treeNode.id = searchResponse.codElemento;
      treeNode.parentId = searchResponse.codElementoPadre;
      treeNode.name = searchResponse.codElemento;
      treeNode.isExpanded = true;
      this.nodeCounter++;
      treeSearchResponses.push(treeNode)
    });

    const nest = (items, id = null, link = 'parentId') =>
      items
        .filter(item => item[link] === id)
        .map(item => ({ ...item, children: nest(items, item.id) }));

    this.treeNodes =  nest(treeSearchResponses);
  }

After doing that, I used an angular library to visualize the tree and modify it using drag&drop (for example I could add or remove some elements, or move the elements, etc), so the tree structur (the treeNodes) can change.

Afted doing that I should be able to recreate an array like the one I used to generate the tree, in order to save it.

I tried using foreach or while, but I'm not able to iterate in the tree structure, in order to visit every node, how could I generate a "reverse algorithm" to do that?

murgank · Accepted Answer · 2021-02-05 13:15:12Z

1

Reverse Algorithm for the tree formed by your code.

this.searchResponse = [];
function setSearchResponse(treeNode) {
    if (treeNode == null || treeNode == undefined) {
        return;
    }
    treeNode.forEach(node=>{
        this.searchResponse.push({
            codElemento: node.id,
            codElementoPadre: node.parentId
        })

        if (node.children !== null || node.children !== undefined)
            setSearchResponse(node.children);
    }
    )
}

answered Feb 5, 2021 at 13:15

murgank

1311 silver badge6 bronze badges

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

1 Comment

Andrei Over a year ago

as I understood nodes can be dragged around the tree, so node.parentId could be wrong at the moment of iterating, but that could be a false expectation

Andrei · Accepted Answer · 2021-02-05 12:59:04Z

1

tree is a structure that can easilly be traversed by a recursive function. also iterator is a js feature that allows to easilly emit items while traversing anything:

function* treeItems(node: Tree, parentId: string) {
  yield {codElemento: node.id, codElementoPadre: parentId};
  for(let child of node.children) yield* treeItems(child, node.id);
}

// usage
const flatArray = [...treeItems(this.treeNodes)];

answered Feb 5, 2021 at 12:59

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

Collectives™ on Stack Overflow

Flatten a tree into an array in Angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related