TypeScript格式化接口数据实现Angular图表series的data赋值

当前代码无法将数组值绑定到series配置的本质原因是异步请求的执行时序差：

• Angular的HttpClient发起的GET请求是异步执行的，.subscribe内的响应回调只有等网络请求返回、拿到接口数据后才会运行
• 现有代码中return图表配置的逻辑是在同步流程中执行的：刚发起HTTP请求就立刻返回配置，此时响应回调还未触发，arrayId/arrayData等数组还全是空值，自然无法将整理好的接口数据绑定到series.data上
• 原有循环写法存在冗余：forEach方法本身会把当前遍历的元素作为回调参数传入，完全不需要额外维护自增变量i来通过下标取数组元素，容易出现下标错位、取值错误的问题

整体调整逻辑为：等接口数据拉取完成、数组元素全部填充后，再组装图表配置并绑定到对应数组，避免时序错位。

• 移除冗余的自增下标，简化数据遍历提取逻辑
• 在组件类层面维护图表配置属性，等异步数据就绪后再为其赋值，触发视图更新
• 将整理好的业务数组直接赋值给series对象的data字段即可完成绑定；如果需要将arrayId作为某个图表系列的数据源，只需在series对应项的data字段直接传入arrayId即可，和绑定其他数组的逻辑完全一致

// 组件类属性定义
chartOptions: Record<string, any> = {};
sleeps: any[] = [];

// 组件初始化时拉取数据、生成图表配置
ngOnInit(): void {
  this.loadSleepDataAndBuildChart();
}

loadSleepDataAndBuildChart(): void {
  // 初始化存储提取数据的空数组
  const arrayId: string[] = [];
  const arrayTimestamp: number[] = [];
  const arrayData: number[] = [];
  const arrayData2: number[] = [];

  this.httpClient.get<any>('http://prod.kaisens.fr:811/api/sleep/?deviceid=93debd97-6564-454b-be33-35bd377a2563&startdate=1612310400000&enddate=1614729600000').subscribe({
    next: (response) => {
      this.sleeps = response;
      // 遍历接口返回值，直接用回调提供的element对象取值，不需要额外维护下标
      this.sleeps.forEach(element => {
        arrayId.push(element._id);
        arrayTimestamp.push(element.timestamp);
        arrayData.push(element.data[18]);
        arrayData2.push(element.data[39]);
      });

      // 所有数据提取完成后，再组装图表配置，将数组绑定到对应字段
      this.chartOptions = {
        series: [
          {
            name: '数据ID',
            // 直接将整理好的arrayId赋值给data完成绑定
            data: arrayId
          },
          {
            name: '睡眠数据字段18',
            data: arrayData
          },
          {
            name: '睡眠数据字段39',
            data: arrayData2
          }
        ],
        // 如需X轴关联时间序列，可将timestamp数组绑定到X轴配置
        xAxis: {
          type: 'category',
          data: arrayTimestamp
        }
      };
    },
    error: (err) => {
      console.error('睡眠数据接口请求失败', err);
    }
  })
}

如果需要更简洁的数据提取逻辑，可以直接用数组map方法替代手动push的写法，减少样板代码：

// 接口响应回来后，直接通过map生成对应数组
const arrayId = response.map(item => item._id);
const arrayTimestamp = response.map(item => item.timestamp);
const arrayData = response.map(item => item.data[18]);
const arrayData2 = response.map(item => item.data[39]);

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