How to find parent in a json array if i select child inside child

Question

How to find parent object with complete info like all the child it contains if i select any one child from them from a selector tag with value id.

Here is my html code:

<select class="form-control show-tick" id="service_category" data-live-search="true" formControlName="service_category" (change)="selectCategory()">
                                    <option selected="" value="">Select</option>
                                    <ng-template #recursiveList let-categories>
                                        <ng-container *ngFor="let category of categories">
                                            <option [ngValue]="category.id">
                                                <i *repeatTimes="category.depth" class="material-icons">remove</i>
                                                <span *ngIf="category.parent != null">{{ category.name }}</span>
                                                <b *ngIf="category.parent == null">{{ category.name }}</b>
                                            </option>
                                            <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: category.children}"></ng-container>
                                        </ng-container>
                                    </ng-template>
                                    <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: categories}"></ng-container>
                                </select>

And here is my json array:

[
{
    "id": 1,
    "name": "Travel",
    "parent": null,
    "children": [
        {
            "id": 2,
            "name": "Car",
            "parent": 1,
            "children": [
                {
                    "id": 3,
                    "name": "Cab Booking",
                    "parent": 2
                }
            ]
        }
    ]
}
]

I want that if i select cab booking from select option then, it i can get whole array object with its parent and all childs.

Answer 1

You have to parse the JSON data to JavaScript data. After you parsed the data you can postprocess the data and replace all parent IDs with references to the parent. Then you could use the whole category object as [ngValue] instead of just the id . After these changes you can traverse the complete tree in both directions with expressions like:

category.parent.parent
category.children[2].children[0]
category.parent.children[2]

This is an minimal example for an array of 2-level nested objects like in your question:

import { Component } from "@angular/core";

const json = `[
{
    "id": 1,
    "name": "Travel1",
    "parent": null,
    "children": [
        {
            "id": 2,
            "name": "Car",
            "parent": 1,
            "children": [
                {
                    "id": 3,
                    "name": "Cab Booking",
                    "parent": 2
                }
            ]
        },
        {
            "id": 4,
            "name": "Bike",
            "parent": 1,
            "children": [
                {
                    "id": 5,
                    "name": "Bike Booking",
                    "parent": 4
                }
            ]
        }
    ]
}, {
    "id": 11,
    "name": "Travel2",
    "parent": null,
    "children": [
        {
            "id": 12,
            "name": "Car",
            "parent": 11,
            "children": [
                {
                    "id": 13,
                    "name": "Cab Booking",
                    "parent": 12
                }
            ]
        },
        {
            "id": 14,
            "name": "Bike",
            "parent": 11,
            "children": [
                {
                    "id": 15,
                    "name": "Bike Booking",
                    "parent": 14
                }
            ]
        }
    ]
}
]`;

interface Obj {
  id: number;
  name: string;
  parent: Obj | null;
  children?: Obj[];
}

@Component({
  selector: "my-app",
  template: `
    <div *ngIf="objs">
      <select [(ngModel)]="value">
        <ng-container *ngFor="let obj of objs">
          <ng-container *ngFor="let child of obj.children">
            <option *ngFor="let el of child.children" [ngValue]="el">
              {{ el.id }}
            </option>
          </ng-container>
        </ng-container>
      </select>
      <p *ngIf="value">Children: {{ value.children }}</p>
      <p *ngIf="value">Parent: {{ value.parent.name }}</p>
      <p *ngIf="value">
        Parent's first child: {{ value.parent.children[0].name }}
      </p>
      <p *ngIf="value">Grandparent: {{ value.parent.parent.name }}</p>
      <p *ngIf="value">
        Grandparent's first child: {{ value.parent.parent.children[0].name }}
      </p>
    </div>
  `
})
export class AppComponent {
  objs: Obj[] | null = null;
  value: Obj | null = null;
  ngOnInit() {
    this.objs = JSON.parse(json).map(obj => {
      obj.children.forEach(child => {
        child.parent = obj;
        child.children.forEach(grandchild => (grandchild.parent = child));
      });
      return obj;
    });
  }
}

The selected category is stored in the variable value and it's possible to traverse up the tree and back down however you want. This minimal example is limited to the given structure (array of 2-level nested objects).

Here is live demo stackblitz