javascript - How to append children to object dynamically

Question

Suppose I have a object like as shown below:

var ob = [
    {name: "root",id: 1},
    {name: "root2",id: 2}
];

And I want to append children object dynamically to it. For example: Suppose if I click on id 1 then children object should be appended to ob object.

    var ob = [
        {name: "root",id: 1, children: [
                 {name: 'sub1', id:'5'},
                 {name: 'sub2', id:'6'},
               ]
        },
        {name: "root2",id: 2}
    ];

Now if I click again on id 6 again children should be added to id 6.

var ob = [
        {name: "root",id: 1, children: [
                 {name: 'sub1', id:'5'},
                 {name: 'sub2', id:'6', children: [
                                 {name: 'subsub1', id:'8'},
                                 {name: 'subsub2', id:'9'},
                                 ]
                 },
               ]
        },
        {name: "root2",id: 2}
    ];

I am trying to write a recursive function for it but no success. On click of any term I have reference only to the clicked term. I don't know about the parent term.

EDIT: Below is my code:

<div *ngFor = "let term of terms">
  <div class="row tr">
        <a (click) = "showTerms($event)">{{term.id}}</a>
  </div>
  <div class="col-xs-6">{{term.desc}}</div>

  <app-icd-codes *ngIf = "term.children" [terms] = "term.children"></app-icd-codes>
 </div>

Here on click of a tag I am adding children's. So I need to create a dynamic object and update that object as shown above.

Answer 1

The most easy way is pass as argument the index of "terms". Put two buttons, one to AddTerms and another one to hideTerms/showTerms.

<div *ngFor = "let term of terms;let i=index">
 <!--see the way to get the index of the array -->
  <div class="row tr">
    {{term.id}}
    <!--you make a link, I use a button-->
    <!--the button "add" is visible when there're NOT "children"-->
    <button *ngIf="!term.terms" (click)="addTerms(i)">Add</button>  
    <!--the button to Show/hide is visible when there ARE "children"-->
    <button *ngIf="term.terms" (click)="term.show=!term.show">
      <span *ngIf="term.show">^</span>
      <span *ngIf="!term.show">v</span>
    </button>
  </div>
  <ng-container *ngIf ="term.terms && term.show">
    <app-icd-codes [terms]="term.terms"></app-icd-codes>
  </ng-container>
</div>

Then you must put your function addTerms. A simple function can be like

//see that you received the "index" of children
addTerms(index: number) {
    this.terms[index].show = true; //<--to show the children
    this.terms[index].terms = [{ id: 3 }, { id: 4 }]; //a "easy" way to add
  }

Ok, really the function must be like

addTerms(index: number) {
    let id=this.terms[index].id; //we get the "id"
    //call a httpClient and subscribe
    this.httpClient.get("url/"+id).subscribe(res=>
          //in the subscription
          {
             this.terms[index].show = true; //<--to show the children
             this.terms[index].terms = res
          })
}

NOTE: Can result "strange" add new properties to an Object (in this case "children" and "show"). If we feel more confortable, we can add the properies when we create the object with a null value