如何将JSON数据转为TypeScript格式？从API取数后构建对应结构

现有实现（TypeScript） #

从Mock获取数据的代码可正常返回目标格式的数据集：

let dbData = getData(); 
res.status(200).json({
  data: dbData,
});

// Mock数据生成函数
const getData = () => [
  {
    ranktype: '1',
    rankname: '1',
    rankseq:  1,
  },
  {
    ranktype: '2',
    rankname: '2',
    rankseq:  2,
  },
];

当前需求 #

需要从API拉取数据，并将API返回的JSON转换成和Mock数据完全一致的结构（仅保留ranktype、rankname、rankseq三个字段），但直接将API返回的JSON放入TypeScript数组无法正常工作。

API返回的原始JSON：

{"data":[{"ranktype":"DAY","rankname":"1","rankseq":6,"rankstatus":"ACTIVE"},{"ranktype":"MONTH","rankname":"2","rankseq":2,"rankstatus":"ACTIVE"}]}

解决方案 #

核心是通过数据映射提取需要的字段，将API返回的冗余数据转换为目标结构，具体实现如下：

1. 定义目标类型（可选但推荐） #

先定义与Mock结构匹配的TypeScript类型，确保类型安全：

// 目标数据类型，和Mock结构完全一致
interface RankItem {
  ranktype: string;
  rankname: string;
  rankseq: number;
}

2. 调用API并转换数据 #

使用fetch或项目中常用的HTTP库（如Axios）调用API，再对返回数据做映射处理：

// 示例：用fetch实现
async function fetchRankData() {
  try {
    const response = await fetch('你的API接口地址');
    const apiResult = await response.json(); // 解析API返回的JSON
    
    // 映射数据，只保留需要的三个字段
    const formattedData: RankItem[] = apiResult.data.map((item: any) => ({
      ranktype: item.ranktype,
      rankname: item.rankname,
      rankseq: item.rankseq
    }));
    
    // 返回和Mock接口格式一致的响应
    res.status(200).json({
      data: formattedData
    });
  } catch (err) {
    res.status(500).json({ error: '数据获取失败' });
  }
}

// 执行函数
fetchRankData();

关键说明 #

• API返回的JSON外层包裹了data字段，需先取apiResult.data获取真正的数组数据
• 用Array.map()遍历数组，每个元素只提取Mock中存在的三个字段，自动忽略多余的rankstatus
• 如果使用Axios，逻辑基本一致：拿到响应后取response.data.data（Axios会将响应数据包在data字段内），再执行映射转换

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