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 []
Le service :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 export class StatCategorie { name: string; value: number; }
depuis le navigateur web l'api retourne depuis l'url : http://localhost:9000/api/glpiit/Statcategories
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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()); } }
Le composant:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 } ]
Merci pour vos pistes.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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'}, ]; } }
Partager