如何将Axios返回的结构化对象转换为表格行数据格式？

API 探路者

2026-8-11

解决方案

要将Axios返回的结构转换为表格所需的行数据格式，核心思路是把三个数组中对应索引的元素组合成单个对象，最终组成数组。以下是两种适合新手理解的实现方式：

方法1：使用`map`（简洁推荐）

map方法会遍历数组并返回新数组，非常适合这种需要转换元素的场景：

// 假设这是Axios返回的res.data
const resData = { 
  material: ['plate','bag','bottle'], 
  customer: ['cust1','cust2','cust3'], 
  prod_id: [1122,3344,4445]
};

// 转换为行数据
const rowdata = resData.material.map((materialItem, index) => ({
  material: materialItem, // 注意你示例里的`materail`是拼写错误，这里用正确的`material`
  customer: resData.customer[index],
  prod_id: resData.prod_id[index].toString() // 将数字转为字符串，匹配目标格式
}));

console.log(rowdata);

代码解释

遍历material数组时，同时拿到当前元素materialItem和索引index
通过索引index，从customer和prod_id数组中取出对应位置的元素
toString()用来把数字类型的prod_id转为字符串，和你想要的格式一致

方法2：使用`forEach`（更直观）

如果你对map不太熟悉，forEach的手动遍历方式更容易理解执行流程：

const resData = { 
  material: ['plate','bag','bottle'], 
  customer: ['cust1','cust2','cust3'], 
  prod_id: [1122,3344,4445]
};

const rowdata = []; // 初始化空数组存放结果

resData.material.forEach((materialItem, index) => {
  // 生成单个行对象并推入数组
  rowdata.push({
    material: materialItem,
    customer: resData.customer[index],
    prod_id: resData.prod_id[index].toString()
  });
});

console.log(rowdata);