[Angular 4][typeScript] TypeError: Cannot read property 'length' of undefined

Bonjour,

je le retrouve sans solutions pour créer deux tableaux à partir d'une liste d'objet:

Objet Stat(name: string, value: number)
- tabName []
- tabValue []

Code:

1
2
3
4
5
 
export class StatCategorie {
    name: string;
    value: number;
  }

Le service :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { SERVER_API_URL } from '../app.constants';
import { Observable } from 'rxjs/Observable';
import { StatCategorie } from './chart1/StatCategorie';
 
@Injectable()
export class Chart1Service {
  constructor(private http: Http) { }
  getStatCategories(): Observable<StatCategorie[]> {
    return this.http.get(SERVER_API_URL + 'api/glpiit/Statcategories').map( (res) => res.json());
  }
}

depuis le navigateur web l'api retourne depuis l'url : http://localhost:9000/api/glpiit/Statcategories

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
[ {
  "name" : "",
  "value" : 555
}, {
  "name" : "Escalade",
  "value" : 3
}, {
  "name" : "Matériel",
  "value" : 138
}, {
  "name" : "N1_Pilotage",
  "value" : 1099
}, {
  "name" : "N2_Applications",
  "value" : 8133
}, {
  "name" : "N2_Outillage",
  "value" : 211
}, {
  "name" : "N2_Réseaux",
  "value" : 1087
}, {
  "name" : "N2_Sauvegarde",
  "value" : 167
}, {
  "name" : "N2_SGBD",
  "value" : 1189
}, {
  "name" : "N2_Stockage",
  "value" : 1024
}, {
  "name" : "N2_Système_Linux",
  "value" : 2153
}, {
  "name" : "N2_Système_Windows",
  "value" : 459
}, {
  "name" : "N2_TMA",
  "value" : 1721
}, {
  "name" : "Sécurité",
  "value" : 249
} ]

Le composant:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import { Component, OnInit, Input } from '@angular/core';
import { Chart1Service } from '../chart1.service';
import { StatCategorie } from './StatCategorie';

@Component({
  selector: 'jhi-chart-1',
  templateUrl: './chart1.component.html',
  styleUrls: ['./chart1.component.css'],
  providers: [Chart1Service]
})
export class Chart1Component {

  private data: StatCategorie[];

  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  public barChartLabels: string[];
  private  barChartValue: number[];
  public barChartType = 'bar';
  public barChartLegend = true;
  public barChartData: any[];

  constructor(private chart1service: Chart1Service) {
    this.chart1service.getStatCategories()
    .subscribe((data) => this.data = data,
              (error) => console.log(error),
              () => console.log('finished'));
    this.dataToArray(this.data);
   }

  private dataToArray(listeData: StatCategorie[]) {
    for ( const element of listeData){                          // ligne source de l'erreur: TypeError: Cannot read property 'length' of undefined
      this.barChartLabels.push(element.name);
      this.barChartValue.push(element.value);
    }
    this.barChartData = [
      {data: this.barChartValue, label: 'Categories'},
    ];
  }
}

Merci pour vos pistes.