Angular 6中如何遍历对象数组并提取counts、time字段值

操作步骤 #

1. （可选）定义数据类型增强代码规范 #

Angular 推荐使用强类型约束，你可以在组件代码顶部先定义接口匹配返回数据结构：

interface TimeCountItem {
  counts: number;
  time: string;
}

// 修改原有data变量的类型声明
data: TimeCountItem[] = [];

2. 遍历返回结果提取并打印字段 #

在订阅的回调函数中直接用forEach遍历数组，即可拿到每个对象的counts和time值：

this.service.getPaymentDistributionData()
  .subscribe((res: TimeCountItem[]) => {
    // 先判断返回值非空避免报错
    if (!res) return;

    // 遍历打印每个元素的字段值
    res.forEach(item => {
      console.log('counts：', item.counts);
      console.log('time：', item.time);
    })

    // 将数据存到组件变量，后续给图表渲染用
    this.data = res;
  })

3. （适配图表场景）单独提取字段数组 #

如果图表需要单独的x轴时间数组、y轴数值数组，可以用map直接提取：

// 写入subscribe回调内
const countsArray = res.map(item => item.counts);
const timeArray = res.map(item => item.time);

console.log('所有counts组成的数组：', countsArray);
console.log('所有time组成的数组：', timeArray);

注意事项 #

• 你当前使用的Angular 6对应RxJS 6.x版本，现有订阅写法无需额外调整即可正常运行
• 如果后续要绑定数据到图表组件，直接把this.data或者提取好的countsArray/timeArray传给图表对应的配置项即可

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