Foreach displays only the last item of array in Angular echarts

Question

here's the code:

list.component.ts

chart: any = []
data = [
  {
    date: (5) ["2020-02-15 12:00:00",, "2020-02-15 13:00:00", "2020-02-15 14:00:00", "2020-02-15 15:00:00", "2020-02-15 16:00:00"],
    temperature: (5) [24.8, 25, 25.3, 25.3, 25.4]
  },{
    date: (5) ["2020-02-26 11:00:00" ,"2020-02-26 12:00:00" ,"2020-02-26 13:00:00" ,"2020-02-26 14:00:00" ,"2020-02-26 15:00:00"],
    temperature: (5) [25.4, 25.3, 25.7, 25.5, 25.7]
  }, {
    date: (4) ["2020-02-26 12:00:00" ,"2020-02-26 13:00:00" ,"2020-02-26 14:00:00" ,"2020-02-26 15:00:00"],
    temperature: (4) [27.9, 27.6, 27.4, 27.3]
  }
];

ngOnInit() {
  data.foreach((param: any) => {
    option = {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: param.date
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: param.temperature,
        type: 'line',
        areaStyle: {}
      }]
    };

    this.chart.push(option);
  }
}

What I'm trying to here is to display an array of echarts, but there's an error in the date. It only gets the last item data, instead it should get the data based on their index.

list.component.ts

<div *ngFor="let record of data;let i = index">

                    <div echarts [options]="chartOption[i]" [autoResize]="true" style="height: 210px;"></div>
</div>

By the looks of it, there are multiple syntactical errors in the code, which I assume is only for the illustrative purpose of the question. However `this.chart` array should contain all 3 charts. How are you displaying them in your template? — ruth, Feb 26 '20 at 08:42
@MichaelD yes, it displayed but the date get the last item. instead it will display based on their index — Panda, Feb 26 '20 at 08:44
Could you please show your template (.html) code? Also please check if my answer works for you. — ruth, Feb 26 '20 at 09:02

score 2 · Accepted Answer · answered Feb 26 '20 at 08:52

Here is the code which you want, I got this the perfect array result.

chart: any = [];
  ngOnInit() {
    let option: any;
    let data1 = [{
      date: ["2020-02-15 12:00:00", , "2020-02-15 13:00:00", "2020-02-15 14:00:00", "2020-02-15 15:00:00", "2020-02-15 16:00:00"],
      temperature: [24.8, 25, 25.3, 25.3, 25.4]
    }, {
      date: ["2020-02-26 11:00:00", "2020-02-26 12:00:00", "2020-02-26 13:00:00", "2020-02-26 14:00:00", "2020-02-26 15:00:00"],
      temperature: [25.4, 25.3, 25.7, 25.5, 25.7]
    }, {
      date: ["2020-02-26 12:00:00", "2020-02-26 13:00:00", "2020-02-26 14:00:00", "2020-02-26 15:00:00"],
      temperature: [27.9, 27.6, 27.4, 27.3]
    }]
    data1.forEach((param: any) => {
      option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: param.date
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: param.temperature,
          type: 'line',
          areaStyle: {}
        }]
        // this.chart.push(option);
      };
      this.chart.push(option);
      console.log(this.chart);
    });
  }

Just put your push method inside the foreach().

Result which you want.

ruth · Answer 2 · 2020-02-26T09:35:48.563

You have multiple syntactical errors in your code.

Foreach is not closed properly.
I don't understand why you have (5) or (4) mentioned in your arrays.

The following code works for me.

Component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  charts: any = []
  data = [
    {
      date: ["2020-02-15 12:00:00", "2020-02-15 13:00:00", "2020-02-15 14:00:00", "2020-02-15 15:00:00", "2020-02-15 16:00:00"],
      temperature: [24.8, 25, 25.3, 25.3, 25.4]
    },{
      date: ["2020-02-26 11:00:00" ,"2020-02-26 12:00:00" ,"2020-02-26 13:00:00" ,"2020-02-26 14:00:00" ,"2020-02-26 15:00:00"],
      temperature: [25.4, 25.3, 25.7, 25.5, 25.7]
    }, {
      date: ["2020-02-26 12:00:00" ,"2020-02-26 13:00:00" ,"2020-02-26 14:00:00" ,"2020-02-26 15:00:00"],
      temperature: [27.9, 27.6, 27.4, 27.3]
    }
  ];

  constructor() {}

  ngOnInit() {

    this.data.forEach((param: any) => {
      const option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: param.date,
          axisLabel : {
            interval: 0
          },
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: param.temperature,
          type: 'line',
          areaStyle: {}
        }]
      };

      this.charts.push(option);
    });
  }
}

Template

<ng-container *ngFor="let chart of charts">
  <div echarts [options]="chart"></div>
</ng-container>

If you want to show all the dates in x-axis use the following option in xAxis options:

axisLabel : {
  interval: 0
}

Working example: Stackblitz

Update

Based on your image, your data shown in the code does not match the data in the image. Please show your actual implementation of the list.component.ts. Also when you have array called chartOption just loop over it like shown below instead of using index. It is redundant.

<ng-container *ngFor="let chart of chartOption">
  <div echarts [options]="chart"></div>
</ng-container>

Foreach displays only the last item of array in Angular echarts

2 Answers2