本文讲解如何对两层嵌套的 JSON 数据（如银行机构及其信用卡列表）执行条件过滤，同时完整保留外层结构；核心在于结合 map 重构每一项 + filter 精确筛选内层数组，并剔除空结果项。
本文讲解如何对两层嵌套的 json 数据（如银行机构及其信用卡列表）执行条件过滤，同时完整保留外层结构；核心在于结合 `map` 重构每一项 + `filter` 精确筛选内层数组，并剔除空结果项。
在处理类似银行信贷产品这类层级化数据时，常见需求是：按 nameCard 或 idCard 模糊/精确匹配筛选信用卡，但必须维持原始顶层结构（如 OpenClientIndicator 和各机构对象的 companyName、id 等字段不变）。直接使用 forEach + 赋值无法构建新结构，而错误地提前 return 或忽略空数组会导致结构坍塌或遗漏数据。
正确做法是采用函数式链式操作：
- 用 map 遍历 listTypeCreditOffer 中每个机构对象，对其做浅拷贝（...x），并仅重写 offerCard 字段为过滤后的新数组；
- 再用外层 filter 剔除 offerCard 为空的机构项，确保最终结果中每个机构都至少含一条匹配卡；
- 顶层属性（如 OpenClientIndicator）通过扩展运算符 ...this.data 直接继承，零丢失。
以下是可直接运行的 TypeScript/JavaScript 示例代码：
const filtroValue = '10'; // 支持字符串或数字输入
const dataFiltered = {
...jsonArray, // 完整保留 OpenClientIndicator 等顶层字段
listTypeCreditOffer: jsonArray.listTypeCreditOffer
.map(offer => ({
...offer, // 保留 companyName、id 等机构信息
offerCard: offer.offerCard.filter(card =>
card.idCard.toString().includes(filtroValue) ||
card.nameCard.toLowerCase().includes(filtroValue.toLowerCase())
)
}))
.filter(offer => offer.offerCard.length > 0) // 移除无匹配卡的机构
};
✅ 关键要点说明：
- ❌ 避免使用 forEach + 外部变量赋值（如原代码中的 cards），它无法组合结构且无返回值；
- ✅ map 是构造新数组的正确选择，配合对象展开语法可安全复用原始字段；
- ✅ 内层 filter 返回布尔值即可（无需 if/return card），JS 自动依据真值决定是否保留；
- ✅ 外层 filter(...length > 0) 是保障结构完整性的重要一环——若某机构所有卡均不匹配，该机构将被移除，避免出现 offerCard: [] 的冗余节点；
- ? 若需严格精确匹配（而非 includes），请将 card.idCard.toString().includes(...) 替换为 card.idCard === Number(filtroValue)，并做好类型校验。
最终输出严格遵循原始 JSON 结构层级，仅精简内容，真正实现「过滤不破形」。
