[FIXED] How to remove empty children element in parent-child relation in Laravel?

Issue

I am working on recursive parent-child relation in laravel and I have successfully get the parent-child recursively from eloquent.

I have a problem when a parent or a child doesn't have child it will show children: [] in my json. I want to remove the empty children element children: []. So, if a parent or a child doesn't have a child, the children: [] should not be showed. I will include the picture of it.

My eloquent Model:

 public function allChild () {
        return $this->hasMany(self::class, 'parent_id', 'id')->select('id', 'parent_id', 'category_name as label');
    }
public function children () {
        return $this->allChild()->with('children');
    }

My controller

 $categories = CatalogCategories::select('id', 'category_name as label')->where('parent_id', 0)
                ->with('children')->get();

The result now

[
    {
        "id":1,
        "label":"Mainan",
        "children":[{
            "id":4,
            "parent_id":1,
            "label":"Category shoes",
            "children":[{
                "id":18,
                "parent_id":4,
                "label":"test",
                "children":[
                    {
                        "id":25,
                        "parent_id":18,
                        "label":"sub cat tes",
                        "children":[
                            {
                                "id":25,
                                "parent_id":18,
                                "label":"sub cat tes",
                                "children":[]
                            }
                        ]
                    },
                    {
                        "id":27,
                        "parent_id":18,
                        "label":"testtttt 123",
                        "children":[]
                    }
                ]
            }]
        }]
    }
]

the result I want

[
    {
        "id":1,
        "label":"Mainan",
        "children":[{
            "id":4,
            "parent_id":1,
            "label":"Category shoes",
            "children":[{
                "id":18,
                "parent_id":4,
                "label":"test",
                "children":[
                    {
                        "id":25,
                        "parent_id":18,
                        "label":"sub cat tes",
                        "children":[
                            {
                                "id":25,
                                "parent_id":18,
                                "label":"sub cat tes"
                            }
                        ]
                    },
                    {
                        "id":27,
                        "parent_id":18,
                        "label":"testtttt 123"
                    }
                ]
            }]
        }]
    }
]

Solution

I have found the solution, I keep the JSON output from Laravel like that and use JS to eliminate empty children:[]

I use javascript to eliminate the empty children

deleteEmpty(data){               
     for (let index = 0; index <data.length; index++) {                    
       if (data[index].children.length != 0){
          this.deleteEmpty(data[index].children);
       } else {                        
          delete data[index]['children']
       }
     }                
   return data;
}

Answered By - kusiaga