print json object parent-kid relation in angular

Question

Lets say I have this JSON object:

{
  "id": 8,
  "name": "Simpson",
  "parent1": {
      "id": 10,
      "name": "Rush",
      "parent1": {
          "id": 12,
          "name": "Fields",
          "parent1": {
              "id": 1,
              "name": "Dixie",
              "parent1": null,
              "parent2": null
          },
          "parent2": null
      },
      "parent2": {
          "id": 11,
          "name": "Caroline",
          "parent1": {
              "id": 2,
              "name": "Ebony",
              "parent1": null,
              "parent2": null
          },
          "parent2": {
              "id": 3,
              "name": "Ramos",
              "parent1":  {
                  "id": 4,
                  "name": "Joyner",
                  "parent1": null,
                  "parent2": null
              },
              "parent2": {
                  "id": 5,
                  "name": "Candy",
                  "parent1": null,
                  "parent2": null
              }
          }
      }
  },
  "parent2": {
      "id": 13,
      "name": "Cantu",
      "parent1": {
          "id": 14,
          "name": "Guerra",
          "parent1": null,
          "parent2": null
      },
      "parent2": {
          "id": 15,
          "name": "Melisa",
          "parent1": null,
          "parent2": null
      }
  }
}

and I wan't to print parent - kid relations and have every ones parents in dropdown:

-Simpson
    -Rush
        -Fields
            -Dixie
                null
                null
            null
        -Caroline
            -Ebony
                null
                null
            -Ramos
                 -Joyner
                     null
                     null
                 -Candy
                     null
                     null
    -Cantu
        -Guerra
            null
            null
        -Melissa
            null
            null

And have them like a drop down like this for instance:

-Simpson
        -Rush
            +Fields

Now I made a method to fetch parents1 and parents2 like this:

public getParents(object: any) {
    let parent1 = object?.parent1;
    if (parent1 != null) {
      this.parents1.push(parent1);
    } else {
      this.parents1.push(null)
    }

    let parent2 = object?.parent2;
    if (parent2 != null) {
      this.parents2.push(parent2);
    } else {
      this.parents2.push(null)
    }

    if (parent1 != null)
      this.getParents(parent1);
    if (parent2 != null)
      this.getParents(parent2);
  }

Which would return populate the arrays parents1 and parents2 like this:

0: {id: 10, name: "Rush", parent1: {…}, parent2: {…}}
1: {id: 12, name: "Fields", parent1: {…}, parent2: null}
2: {id: 1, name: "Dixie", parent1: null, parent2: null}
3: null
4: {id: 2, name: "Ebony", parent1: null, parent2: null}
5: null
6: {id: 4, name: "Joyner", parent1: null, parent2: null}
7: null
8: null
9: {id: 14, name: "Guerra", parent1: null, parent2: null}
10: null
11: null

0: {id: 13, name: "Cantu", parent1: {…}, parent2: {…}}
1: {id: 11, name: "Caroline", parent1: {…}, parent2: {…}}
2: null
3: null
4: {id: 3, name: "Ramos", parent1: {…}, parent2: {…}}
5: null
6: {id: 5, name: "Candy", parent1: null, parent2: null}
7: null
8: null
9: {id: 15, name: "Melisa", parent1: null, parent2: null}
10: null
11: null

Now I can easily match who is parent1 and parent2 (parents1[0] and parents2[0], parents1[1] and parents2[1]...) but have no idea who is kid to whom.

I know there is a collapse button in bootstrap and that I could for example iterate through array with *ngFor put button for collapse in parent and append id to the next in array (child) but this will only go up to null and then it would get pretty complicated to do it in component.html

So I would like to know if someone has an idea for a easy way to this. Am I overthinking this? Thank you

print json object parent-kid relation in angular

0 Answers0