本文详解如何将 Angular 中深度嵌套的对象（含多层子对象和数组）转换为扁平、规范的 JSON 结构，重点解决 locationData 中 locationList 提升为数组、ContactData.contactList 提级合并等常见表单序列化需求，并提供类型安全的 TypeScript 实现方案。
本文详解如何将 angular 中深度嵌套的对象（含多层子对象和数组）转换为扁平、规范的 json 结构，重点解决 `locationdata` 中 `locationlist` 提升为数组、`contactdata.contactlist` 提级合并等常见表单序列化需求，并提供类型安全的 typescript 实现方案。
在 Angular 表单开发中，前端采集的数据常以嵌套结构组织（如 BioData、locationData.locationList、contactData.contactList），但后端 API 往往要求更扁平、语义清晰的 JSON 格式。本文以实际案例出发，演示如何高效、可维护地完成此类结构转换。
✅ 明确目标结构
原始数据中：
- BioData 是顶层对象；
- locationData 包含 locationList 数组，每个元素又嵌套 ContactData 对象，其内含 contactList 数组；
- 目标是将 locationData 变为直接包含 address1、address2 和 contactList 的对象数组，移除冗余层级。
? 类型定义：提升可读性与安全性
遵循 TypeScript 最佳实践，定义清晰、可选（?）的接口，避免运行时属性访问错误：
interface BioData {
firstName?: string;
lastName?: string;
}
interface PhoneContact {
phone?: string;
extension?: string;
}
interface LocationItem {
address1?: string;
address2?: string;
contactList?: PhoneContact[];
}
interface FormData {
bioData: BioData;
locationData: LocationItem[];
}⚠️ 注意：接口属性设为可选（?）便于处理部分字段缺失的场景；若后端强制非空，可移除 ? 并配合表单验证确保数据完整性。
Miller CSV TSV JSON 数据处理器下载Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
?️ 转换逻辑：简洁、函数式、无副作用
使用 map() 配合解构赋值，一次性完成层级剥离与字段重映射：
// 假设原始数据变量名为 `rawData`
const transformFormData = (rawData: any): FormData => {
const result: FormData = {
bioData: { ...rawData.BioData }, // 浅拷贝，保留 firstName/lastName（注意大小写一致性）
locationData: rawData.locationData?.locationList?.map((loc: any) => ({
address1: loc.address1,
address2: loc.address2,
contactList: loc.ContactData?.contactList || []
})) || []
};
return result;
};
// 使用示例
const formData = transformFormData(originalData);
console.log(JSON.stringify(formData, null, 2));? 关键细节说明
- 大小写敏感：原始数据中 BioData、ContactData 为 PascalCase，而接口建议用 camelCase（如 bioData、contactList）。转换时需严格匹配源字段名（如 rawData.BioData），目标字段按接口规范命名。
- 空值防护：通过可选链 ?.（如 rawData.locationData?.locationList）和空值合并 || [] 避免 Cannot read property 'map' of undefined 错误。
- 不修改原数据：使用展开运算符 {...rawData.BioData} 和 map() 创建新对象，确保状态不可变，符合 Angular Reactive Forms 和 NgRx 等最佳实践。
✅ 最终输出示例
经转换后，formData 符合预期结构：
{
"bioData": {
"firstName": "Greg",
"lastName": "John"
},
"locationData": [
{
"address1": "22 roackfield",
"address2": "30 Grandall view",
"contactList": [
{ "phone": "658884888", "extension": "555" },
{ "phone": "658884888", "extension": "555" }
]
},
{
"address1": "102 Mockview",
"address2": "730 Trunder str",
"contactList": [
{ "phone": "9999999", "extension": "333" },
{ "phone": "97874747646", "extension": "000" }
]
}
]
}该方案轻量、可复用、类型安全，适用于任何类似嵌套 → 扁平的表单预处理场景。如需支持深层递归或动态键名，可进一步封装为通用 flattenNestedObject 工具函数，但本例中明确路径的 map + 解构已是最优解。
