如何从JSON数组中提取特定索引范围，获取近7天疫情时间序列数据

实现方案 #

首先要注意你调用的https://api.covid19india.org/v4/min/timeseries.min.json返回的根结构是以地区编码为key的对象，不是数组，所以你之前用filter遍历的写法是错误的，先修正这部分逻辑，再按以下步骤提取过去7天的病例数据：

1. 先拿到对应用户地区的时间序列数据，直接通过地区编码取对象属性即可
2. 把日期字段从对象key转为数组，按日期升序排序（保险起见手动排序避免接口返回顺序异常）
3. 截取排序后数组的最后7个元素，就是最近一周的日期数据
4. 遍历这7个日期，提取你需要的确诊/死亡/治愈等病例数值即可，注意处理部分日期没有delta字段的异常情况

完整代码示例

useEffect(() => {
  axios
    .get("https://api.covid19india.org/v4/min/timeseries.min.json")
    .then((response) => {
      setEarliest2(response.data);
      // 直接取对应地区的数据，response.data是对象不是数组，不需要filter
      const targetRegionData = response.data[mappedLocation.stateShort];
      if (!targetRegionData) return;
      
      // 提取日期数组并按时间升序排序
      const dateKeys = Object.keys(targetRegionData.dates).sort((a,b) => new Date(a) - new Date(b));
      // 取最后7天的日期
      const last7DaysKeys = dateKeys.slice(-7);
      
      // 组装成数据集格式
      const last7DaysData = last7DaysKeys.map(dateStr => {
        const dayData = targetRegionData.dates[dateStr];
        return {
          x: new Date(dateStr),
          confirmed: dayData.delta?.confirmed || 0, // 无新增数据时默认返回0
          totalConfirmed: dayData.total.confirmed
        }
      });
      // 存到state供组件调用
      setWeekData(last7DaysData);
    })
}, [mappedLocation.stateShort])

const DataSet = (props) => {
  // 直接使用处理好的近7天数据返回即可
  return props.weekData.map(item => ({
    x: item.x,
    y: item.confirmed
  }))
}

如果你习惯用moment处理日期，把排序逻辑替换为moment的日期比较方法即可，效果完全一致。

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