CODEWITHSUNDEEP
angulartreeangular2-templateangular2-directives
Dark Horse
Dark Horse

Reputation: 21

How to filter the subnodes of a tree using recursion in angular2

--**app.component.ts**
import { Component,OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';


@Component({
  selector: 'my-app',
  templateUrl:'./app.component.html'
})
export class AppComponent implements OnInit {
  Tree: any;
  private searchText$ = new Subject<string>();
  ngOnInit() {
    this.Tree = this.myTree;
  }

  myTree  = [
    { name: "parent1", subnodes: [{ name: "parent1_child1", subnodes: [{ name: "parent_child1_child1", subnodes: [] }] },{ name: 'parent1_child2', subnodes: [] }]  },
      {
          name: "secondparent2",
          subnodes: [
            { name: "secondparent2_child1", subnodes: [] }
          ]
      },
        {
          name: "thirdparent3",
          subnodes: [
              {
              name: "Chandigarh3",
                  subnodes: [
                    { name: "parent3_child1_child1", subnodes: [] }
                  ]
              }
          ]
      }
  ];

  filter(name: string):any {

    this.Tree = this.myTree.filter(data => data.name.match(name) || (data.subnodes.filter(subnode => (subnode.name.match(name))).length > 0) ? true:false);

  }

  search(input: string, data: any): boolean {
   let output= data.subnodes.filter(subdata => (subdata.name.match(name)))
   if (output != undefined && output.length > 0) {
     return true;
   }
   else {
     return false;
   }

    }

  }


--**app.component.html**
<h1>Tree as UL</h1>
<tree-view [treeData]="Tree"></tree-view>
<input   type="text"  (keyup)="filter($event.target.value)"  />

I am able to filter first parent nodes and corresponding subnodes but after that how to filter subnodes? I have written search function so i can invoke search method from filter method by passing the input and tree , I want to use search method recursively

Upvotes: 1

Views: 2589

Answers (1)

Boris Lobanov
Boris Lobanov

Reputation: 2454

This has nothing to do with Angular in particular, but with pure Javascript I managed to write this code that uses tail recursion and gets the job done:

function walkNodes(nodes, term) {
    let hasValue = false;

    nodes.forEach(node => {
        if (searchTree(node, term)) {
        hasValue = true; 
        return;
      };
    });

    return hasValue;
  }

  function searchTree(tree, term) {
    if (tree.name === term) { return true; }

    if ((tree.subnodes && tree.subnodes.length)) {
      return walkNodes(tree.subnodes, term);
    } 

    return false;
  }

  console.log(walkNodes(myTree, 'parent1_child2')); // true
  console.log(walkNodes(myTree, 'secondparent2_child1')); // true
  console.log(walkNodes(myTree, 'secondparent2_child12')); // false

https://jsfiddle.net/efdou6q1/

Upvotes: 1

Related Questions