React组件中无法从API返回JSON按日期与Type提取目标数组

嘿，我懂你现在的困扰——拿到API返回的多层JSON数据后，想要重组出每个日期对应包含date和Details的对象，但之前的代码只提取了Details，把关键的日期给漏掉了对吧？

问题出在哪？ #

你之前写的代码：

var final=[]; 
for (const item of data){ 
  final.push(item.Details); 
} 

只把每个项里的Details数组推进了新数组，完全没带上item.date，所以结果里自然看不到日期啦。

正确实现方式 #

其实很简单，只需要在push的时候，把date和Details一起包装成新对象就行。这里给你两种常用的写法：

方法1：用Array.map()（React里更推荐这种简洁的方式）

map方法可以直接遍历数组并返回重组后的新数组，代码更清晰：

// 重组数组，保留date和对应的Details，顺便去掉日期字符串末尾的空格
const final = data.map(item => ({
  date: item.date.trim(),
  Details: item.Details
}));

console.log(final);

方法2：修正你的for循环写法

如果你习惯用for循环，只需要修改push的内容：

var final = [];
for (const item of data) {
  // 把date和Details一起放进新对象再push
  final.push({
    date: item.date.trim(),
    Details: item.Details
  });
}

console.log(final);

进阶：如果需要按Type筛选Details #

如果你还需要进一步筛选Details里的Type（比如只保留'C'或'D'类型的数据），可以在重组的时候加上过滤逻辑：
比如只保留Type为'C'的详情：

const final = data.map(item => ({
  date: item.date.trim(),
  Details: item.Details.filter(detail => detail.Type === 'C')
}));

或者把'C'和'D'的详情分开存储：

const final = data.map(item => ({
  date: item.date.trim(),
  CTypeDetails: item.Details.find(detail => detail.Type === 'C'),
  DTypeDetails: item.Details.find(detail => detail.Type === 'D')
}));

这样处理后，你就能得到每个日期对应包含所需数据的对象数组啦。

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