如何在React-TypeScript中基于现有JSON生成指定类型的新JSON

我有如下TypeScript接口类型，需要基于该类型从给定的原始JSON数据生成新的JSON结构：

export interface Test {
  name: string;
  address: Address;
  contactInformation: ContactInformation;
  status: string;
}

原始JSON数据：

{
  "Data": [
    {
      "status": "Active",
      "benefits": [
        {
          "type": "30",
          "Details": {
            "Network": [
              {
                "statusCode": "1",
                "contacts": [
                  {
                    "name": "Bla",
                    "address": {
                      "line1": "P.O. BOX 740800",
                      "city": "Bangalore",
                      "state": "Karnataka",
                      "stateCode": "KA",
                      "zipCode": "560001"
                    },
                    "contactInformation": [
                      {
                        "url": "WWW.Bla.COM"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        }
      ]
    }
  ]
}

预期生成的符合Test类型的JSON结构：

{
  "NewData": [
    {
      "name": "Bla",
      "address": {
        "line1": "P.O. BOX 740800",
        "city": "Bangalore",
        "state": "Karnataka",
        "stateCode": "KA",
        "zipCode": "560001"
      },
      "contactInformation": [
        {
          "url": "WWW.Bla.COM"
        }
      ],
      "status": "Active"
    }
  ]
}

我尝试用TypeScript的map方法处理，但没能得到预期结果，请问该怎么实现？

解决方案 #

你需要逐层遍历原始JSON的嵌套结构，提取Test接口所需字段后重新组织格式。由于原始数据存在多层嵌套（Data → benefits → Details.Network → contacts），需要深入到contacts数组的同时，保留外层的status字段。

以下是完整的TypeScript实现代码：

// 补全依赖的接口定义，确保类型校验完整
export interface Address {
  line1: string;
  city: string;
  state: string;
  stateCode: string;
  zipCode: string;
}

export interface ContactInfoItem {
  url: string;
}

export type ContactInformation = ContactInfoItem[];

export interface Test {
  name: string;
  address: Address;
  contactInformation: ContactInformation;
  status: string;
}

// 原始数据示例
const rawData = {
  "Data": [
    {
      "status": "Active",
      "benefits": [
        {
          "type": "30",
          "Details": {
            "Network": [
              {
                "statusCode": "1",
                "contacts": [
                  {
                    "name": "Bla",
                    "address": {
                      "line1": "P.O. BOX 740800",
                      "city": "Bangalore",
                      "state": "Karnataka",
                      "stateCode": "KA",
                      "zipCode": "560001"
                    },
                    "contactInformation": [
                      {
                        "url": "WWW.Bla.COM"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        }
      ]
    }
  ]
};

// 数据转换逻辑
const transformData = (data: typeof rawData): { NewData: Test[] } => {
  const newData: Test[] = [];

  // 逐层遍历嵌套数组
  data.Data.forEach(dataItem => {
    const parentStatus = dataItem.status;
    dataItem.benefits.forEach(benefit => {
      benefit.Details.Network.forEach(network => {
        // 用map转换每个contact为Test类型
        const transformedContacts = network.contacts.map(contact => ({
          name: contact.name,
          address: contact.address,
          contactInformation: contact.contactInformation,
          status: parentStatus
        }));
        newData.push(...transformedContacts);
      });
    });
  });

  return { NewData: newData };
};

// 执行转换并输出结果
const result = transformData(rawData);
console.log(JSON.stringify(result, null, 2));

关键说明 #

1. 补全了Address和ContactInformation相关的接口定义，保证类型系统能正确校验转换后的数据
2. 通过多层forEach遍历原始数据的嵌套数组，定位到最内层的contacts数据
3. 用map将每个contact对象转换为符合Test接口的结构，并带上外层的status字段
4. 最后将所有转换后的对象收集到NewData数组中，输出目标格式

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