无法推送嵌套数组中子项的数据子项

Question

So I have the following Array. I can push to the parent level and child level however I can't seem to push to Children of Children or deeper. Here's the Array:

 TREE_DATA: SegmentCategory[] = [
    {
      id: 1,
      name: 'Category 1',
      children: [
        {
          id: 2,
          name: 'Category 1-1',
          children: [
            {
              id: 4,
              name: 'Category 1-1-a',
              children: []
            },
            {
              id: 5,
              name: 'Category 1-1-b',
              children: []
            },
          ]
        },
        {
          id: 6,
          name: 'Category 1-2',
          children: [
            {
              id: 7,
              name: 'Category 1-2-a',
              children: [
                {
                  id: 8,
                  name: 'Category 1-2-1',
                  children: [
                    {
                      id: 9,
                      name: 'Category 1-2-2-a',
                      children: []
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    {
      id: 10,
      name: 'Category 2',
      children: []
    }
  ];

And here is the method I am using to add data to the array:

createCategory() {
    this.id++;

    if (this.formGroup.controls['parentCategory'].value == null) {
      this.TREE_DATA.push(
        {
          id: this.id,
          name: this.formGroup.controls['categoryName'].value,
          children: []
        });
    } else {
      this.TREE_DATA.forEach((v, index) => {
        if (v.id === this.formGroup.controls['parentCategory'].value.id) {
          this.TREE_DATA[index].children.push(
            {
              id: this.id,
              name: this.formGroup.controls['categoryName'].value,
              children: []
            }
          );
        }
      });
    }
  }

I know that I can just add an additional foreach however this doesn't seem like the best way to handle this, as I could want to go 5-6 layers down at any time to add a new nested child. What would be the best way to handle this?

Answer 1

You could take a recursive function for finding an object in the tree.

 function find(array, id) { var result; array.some(object => { if (object.id === id) return result = object; return result = find(object.children || [], id); }); return result; } var data = [{ id: 1, name: 'Category 1', children: [{ id: 2, name: 'Category 1-1', children: [{ id: 4, name: 'Category 1-1-a', children: [] }, { id: 5, name: 'Category 1-1-b', children: [] }] }, { id: 6, name: 'Category 1-2', children: [{ id: 7, name: 'Category 1-2-a', children: [{ id: 8, name: 'Category 1-2-1', children: [{ id: 9, name: 'Category 1-2-2-a', children: [] }] }] }] }] }, { id: 10, name: 'Category 2', children: [] }]; console.log(find(data, 9)); console.log(find(data, 'unknown'));