How to filter children JSON objects based on some value Angular 8

Issue

I am getting API response inside filterchildrenByRegion() function,

I want to remove those object which are not matching with the selected Region and return all data as it is.

Ex 1 - If i will pass '1UL Africa' inside changeRegion() function,than it will return data as my expected output 1.

Ex - 2 - If i will pass 'South Africa"' inside changeRegion() function,than it will return data as my expected output 2.

changeRegion(){  
 this.newRegion = this.filterchildrenByRegion('1UL Africa');
}

 filterchildrenByRegion(region){      
   this.data = [
      {
        "name": "Africa",
        "children": [
          {
            "name": "Test1",
            "region": "1UL Africa"
          },
          {
            "name": "Test2",
            "region": "South Africa",
          },
          {
            "name": "Test3",
            "region": "New Test",
          }
        ]
      },
      {
        "name": "Europe",
        "children": [
          {
            "name": "Test4",
            "region": "1UL Africa"
          },
          {
            "name": "Test5",
            "region": "Test Europe"
          }
        ]
      }
    ];    
      return this.data.filter(x => x.children.map(child => child.region).includes(regionName));
  }; 

Expected Output 1

result = [
      {
        "name": "Africa",
        "children": [
          {
            "name": "Test1",
            "region": "1UL Africa"
          }
        ]
      },
      {
        "name": "Europe",
        "children": [
          {
            "name": "Test4",
            "region": "1UL Africa"
          }
        ]
      }
    ];

I tried below code but it is returning empty result to me

getClusterObjectByRegion(regionName: string) {
    this.data = this.clusterFactoryList;
    return this.data.map((x) => {
      const childrenFulfillingTheSearch = x.children.filter(c => c.buSubRegion.includes(regionName));
      if (childrenFulfillingTheSearch.length === 0) {
        return undefined;
      }
      return {
        ...x,
        children: childrenFulfillingTheSearch
      };
    }).filter(x => x !== undefined);
  };

Expected Output 2

result =  [
      {
        "name": "Africa",
        "children": [
          {
            "name": "Test1",
            "region": "1UL Africa"
          }
        ]
      }     
    ];

Solution

Maybe not the most efficient, but it works, if I understood your needs correctly:

function getByRegion(region: string) {
  return data.map(r => ({...r, children: r.children.filter(c => c.region === region)}))
    .filter(r => r.children.length > 0);
}

Answered By - Gunnar B.