如何从API响应数组动态生成目标表格数据结构？

API返回原始数据 #

[
  {
    "category": "Emergency services",
    "code": "RMY 90",
    "limit": "9032",
    "OT": "4124"
  },
  {
    "category": "Pediatrician",
    "code": "RMY 80",
    "limit": "1232",
    "OT": "9412"
  },
  {
    "category": "Neurology",
    "code": "RMY 70",
    "limit": "6423",
    "OT": "7312"
  }
]

期望转换后的目标格式 #

[
  {
    "item": "Block Code",
    "Emergency services": "RMY 90",
    "Pediatrician": "RMY 80",
    "Neurology": "RMY 70"
  },
  {
    "item": "Total Capacity",
    "Emergency services": "9032",
    "Pediatrician": "1232",
    "Neurology": "6423"
  },
  {
    "item": "OT Capacity",
    "Emergency services": "4124",
    "Pediatrician": "9412",
    "Neurology": "7312"
  }
]

我的尝试代码 #

const rowList = ["Block Code", "Total Capacity", "OT Capacity"];  
let arr = [];  
const dumming = rowList?.forEach(item => {  
  for (const [key, object] of Object.entries(responseData)) {  
    let x = [];  
    Object.keys(object)?.forEach(item => {  
      x.push(object[item]);  
    });  
    // console.log('rrrr', x);  
  }  
  let val = responseData.map((ned, index) => {  
    let x = {};  
    Object.keys(object)?.forEach(item => {  
      x = ned[item]  
    });  
    // let cor = Object.entries(ned).map(([key, leaf]) => key+leaf);  
    return {  
      id: `${ index }-${ item }`,  
      name: item, ...x  
    };  
  });  
  arr.push(val);  
});  
console.log(arr);

解决方案 #

你的代码逻辑嵌套过多，且缺少明确的字段映射关系，导致生成的结构不符合预期。可以通过定义字段映射+遍历生成行的方式简洁实现需求：

实现思路 #

1. 定义原始字段与目标item名称的映射关系，明确哪个原始字段对应目标中的哪一行；
2. 遍历映射关系，为每个映射项生成一行数据，同时为每个分类填充对应字段的值。

具体代码 #

// 定义原始字段到目标item名称的映射
const fieldMap = [
  { key: 'code', label: 'Block Code' },
  { key: 'limit', label: 'Total Capacity' },
  { key: 'OT', label: 'OT Capacity' }
];

// 转换函数
const transformTableData = (responseData) => {
  return fieldMap.map(field => {
    // 初始化当前行，设置item名称
    const row = { item: field.label };
    // 遍历每个分类数据，填充对应字段的值
    responseData.forEach(categoryData => {
      row[categoryData.category] = categoryData[field.key];
    });
    return row;
  });
};

// 调用转换函数（假设responseData是API返回的原始数组）
const transformedData = transformTableData(responseData);
console.log(transformedData);

这段代码逻辑清晰，后续如果需要新增字段或分类，只需修改fieldMap或确保新增的分类数据结构一致即可，维护成本低。

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