Angular数组过滤：仅保留含Open状态案例的客户

我有一个客户数组，每个客户对象包含clientCases案例数组。需要仅保留包含caseStatus为"Open"的案例的客户，过滤后完全不显示无Open案例的客户。但当前代码只过滤了客户的案例列表，无Open案例的客户仍会留在结果里（clientCases为空数组），达不到需求。

原始数据示例 #

var clientData = [
  {"clientId": "1cb8fe0f-2d21-4e5b-99e9-fbbdf0eebdc7", ..., "clientCases": [{"caseStatus": "Open"}, {"caseStatus": "Closed"}]},
  {"clientId": "1cb8fe0f-2d21-4e5b-99e9-fbbdf0eebdc7", ..., "clientCases": [{"caseStatus": "Closed"}]}
];

期望结果 #

仅保留含Open案例的客户，且其clientCases仅包含Open状态案例。

当前代码（存在问题） #

let cloned = _.cloneDeep(this.clientData);
let filtered = cloned.map((i) => {
        i.clientCases = i.clientCases.filter((c) => c.caseStatus == 'Open');
        return i;
      });

解决方案 #

核心思路是：先过滤每个客户的clientCases保留Open案例，再移除那些过滤后clientCases为空的客户。下面提供两种实现方式：

方式1：链式调用（简洁写法） #

const cloned = _.cloneDeep(this.clientData);
const filtered = cloned
  .map(client => {
    // 筛选当前客户的Open状态案例
    const openCases = client.clientCases.filter(caseItem => caseItem.caseStatus === 'Open');
    // 返回更新后的客户对象，避免直接修改克隆后的对象（可选，更安全）
    return { ...client, clientCases: openCases };
  })
  // 过滤掉没有Open案例的客户
  .filter(client => client.clientCases.length > 0);

方式2：分步处理（更直观） #

const cloned = _.cloneDeep(this.clientData);
// 第一步：给每个客户只保留Open案例
const processedClients = cloned.map(client => {
  client.clientCases = client.clientCases.filter(caseItem => caseItem.caseStatus === 'Open');
  return client;
});
// 第二步：移除没有任何Open案例的客户
const finalFiltered = processedClients.filter(client => client.clientCases.length > 0);

说明 #

• 先通过map处理每个客户的案例列表，确保只留下Open状态的项；
• 再通过filter筛选掉clientCases长度为0的客户，这样就彻底排除了没有Open案例的客户；
• 如果你用了_.cloneDeep做深拷贝，直接修改client.clientCases没问题；用对象展开{...client, clientCases: openCases}则是更稳妥的 immutable 写法，避免意外副作用。

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