如何将 Angular 里嵌套对象与数组结构扁平化为标准 JSON 格式

本文详解如何在 Angular 项目中将深层嵌套的对象（含多层子对象和数组）转换为符合后端接口要求的扁平化 JSON 结构，重点解决 locationList 提升、ContactData.contactList 提取等常见数据整形需求。

本文详解如何在 angular 项目中将深层嵌套的对象（含多层子对象和数组）转换为符合后端接口要求的扁平化 json 结构，重点解决 `locationlist` 提升、`contactdata.contactlist` 提取等常见数据整形需求。

在 Angular 表单提交场景中，前端常需对原始表单对象（如 FormGroup.value）进行结构重塑，以适配后端 API 的契约规范。如题所示，原始数据中 locationData 是一个包含 locationList 数组的对象，而每个 locationList 项又嵌套了 ContactData.contactList；目标格式则要求：

• BioData 保持对象结构但属性名标准化（如 firstname → firstName）；
• locationData 直接变为 LocationData[] 数组；
• 每个位置项内直接包含 address1、address2 和扁平化的 contactList（不再包裹于 ContactData）。

✅ 推荐实现方式：类型安全 + 函数式映射

首先定义清晰的 TypeScript 接口，提升可维护性与 IDE 支持：

interface BioData {  firstName?: string;  lastName?: string;}interface ContactItem {  phone?: string;  extension?: string;}interface LocationData {  address1?: string;  address2?: string;  contactList?: ContactItem[];}interface SubmitPayload {  bioData: BioData;  locationData: LocationData[];}

⚠️ 注意：所有字段设为可选（?），避免初始化负担；实际使用时可通过 strictNullChecks 配合校验确保必填字段非空。

接着，使用不可变方式构建目标结构（推荐在 service 或提交前的 transform 方法中调用）：

function transformFormData(source: any): SubmitPayload {  return {    bioData: {      firstName: source.BioData?.firstname,      lastName: source.BioData?.lastName,    },    locationData: (source.locationData?.locationList || []).map((loc: any) => ({      address1: loc.address1,      address2: loc.address2,      contactList: (loc.ContactData?.contactList || []) as ContactItem[],    })),  };}// 使用示例const rawFormValue = { /* 原始嵌套数据 */ };const payload = transformFormData(rawFormValue);console.log(JSON.stringify(payload, null, 2));

? 关键要点说明

• 避免副作用：使用 map() + 对象字面量而非 forEach() 或 for 循环，保证数据纯净性，便于测试与调试；
• 空值防御：通过 ?. 可选链与 || [] 默认值处理缺失字段，防止运行时错误；
• 类型断言谨慎使用：as ContactItem[] 仅在源数据结构可信时适用；更健壮方案可配合 Array.isArray() + every() 做运行时校验；
• 扩展性考虑：若未来新增字段（如 city、postalCode），只需更新 LocationData 接口及映射逻辑，无需重构主流程。

? 进阶建议

• 将 transformFormData 封装为通用 pipe 或 injectable service，支持复用；
• 结合 rxjs 的 map 操作符，在 HTTP 请求管道中统一处理（如 this.http.post('/api/submit', transformFormData(form.value))）；
• 若嵌套层级更深（如 contactList 内还需展开 emails 数组），可递归封装 flattenObject(obj, pathMap) 工具函数，但本例中扁平化已足够，过度抽象反而降低可读性。

最终生成的 JSON 完全符合目标格式——结构清晰、语义明确、零冗余嵌套，既满足后端解析要求，也利于前端后续状态管理与错误定位。