how to build a new object, which based on the other object dynamically

Question

I implement a tree stucture for my UI with material tree, in which a new Object for this tree will be needed. this object looks like this:

[
  {
    name: 'Fruit',
    children: [
      {name: 'Apple'},
      {name: 'Banana'},
      {name: 'Fruit loops'},
    ]
  }
]

but now what I have looks like this:

[
 {"contact" : 
           { information: {name: "abc", address:"asdfa"},
           type: "phone"
           value: "123212123"

}
]

expected output object looks like this:

[
  {
    name: 'contact',
    children: [

 {name: "infmormation",
       children: [
           {name: "address",
       children: [
          {name: 'absdsdc'},
    
        ]},
          {name: "name",
       children: [
          {name: 'adasdf'},
    
        ]},
    
        ]},
 
      {name: "type",
       children: [
          {name: 'abc'},
    
        ]},
          {name: "type",
       children: [
          {name: 'Broccoli'},
    
        ]},
      
    ]
  }

]

how I can create a tree object for my input object with a dynamic funcktion how create a recusive method, which can create dynmiac output method. I need your help. any solution?

Answer 1

In html

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" >
    <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
      <span>{{node.name}}</span>
      [...]
    </mat-tree-node>
</mat-tree>

In Ts

//Variables tree
treeControl: FlatTreeControl<FileFlatNode>;
treeFlattener: MatTreeFlattener<YourObject, FileFlatNode>;
dataSource: MatTreeFlatDataSource<YourObject, FileFlatNode>;
transformer = (node: YourObject, level: number) => {
    return new FileFlatNode(node.name,node.expandable,node.level,node.childrens);
}

// Functions tree
private _getLevel = (node: FileFlatNode) => node.level;
private _isExpandable = (node: FileFlatNode) => node.expandable;
private _getChildren = (node: YourObject): Observable<YourObject[]> => 
observableOf(node.childrens);

//Inherit class represent tree node
export class FileFlatNode {
  constructor(public name: string,
              public expandable: boolean,
              public level: number,
              public childrens: YourObject[]) {
     //Here you can do the mapping between your object and the tree node
  }
}

// In constructor of main class
this.treeFlattener = new MatTreeFlattener(this.transformer, this._getLevel,
this._isExpandable, this._getChildren);