Angular 8中如何根据嵌套对象的值过滤对象数组

需求描述 #

需要在getClusterByName()函数中根据传入的region值搜索对象数组，当传入'1UL Africa'、'New Test'或'South Africa'时，返回包含对应子对象的父对象，预期输出如下：

result = [
     {
        "name": "Africa",
        "children": [
          {
            "name": "Test1",
            "region": "1UL Africa"
          },
          {
            "name": "Test2",
            "region": "South Africa",
          },
          {
            "name": "Test3",
            "region": "New Test",
          }
        ]
      }
];

当前代码问题 #

当前代码直接对顶层数组过滤，但顶层对象没有region属性，region存在于children数组的子对象中，因此x.region === clusterName永远不成立，返回空数组：

changeRegion(){  
 this.newRegion = this.getClusterByName('South Africa');
}

getClusterByName(clusterName){
   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.region === clusterName);
  };

修正后的实现 #

方案1：返回包含目标region子项的完整父对象 #

如果需求是只要父对象的children中存在匹配的region，就返回整个父对象（保留所有children），可以这样实现：

changeRegion(){  
 this.newRegion = this.getClusterByName('South Africa');
}

getClusterByName(clusterName){
   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"
          }
        ]
      }
    ];    
    // 过滤出children中存在匹配region的父对象
    return this.data.filter(parent => 
      parent.children.some(child => child.region === clusterName)
    );
  };

方案2：返回父对象且仅保留匹配region的子项 #

如果需求是返回父对象，同时children只保留匹配目标region的子项，可以这样实现：

changeRegion(){  
 this.newRegion = this.getClusterByName('South Africa');
}

getClusterByName(clusterName){
   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"
          }
        ]
      }
    ];    
    // 先处理children只保留匹配项，再过滤掉无匹配子项的父对象
    return this.data
      .map(parent => ({
        ...parent,
        children: parent.children.filter(child => child.region === clusterName)
      }))
      .filter(parent => parent.children.length > 0);
  };

内容的提问来源于stack exchange，提问作者Pravesh Singh