Récupérer une liste d'objet (JSON) et extraire des graphiques

Version imprimable

Bonjour,

Je "plante" sur un affichage de données issues d'un serveur datasnap / rest.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
{"result":
	[[
		{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"9","T2":"200","T3":"15","T4":"200","TT":"19,7999992370605","TA":"32,9000015258789","PP":"0","DATE":"28/08/2013 15:04:37"}},
		{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"4","T2":"153","T3":"8","T4":"157","TT":"20,2999992370605","TA":"23,1000003814697","PP":"0","DATE":"29/08/2013 18:06:51"}},
		{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"200","T3":"13","T4":"200","TT":"19,7999992370605","TA":"32,0999984741211","PP":"0","DATE":"30/08/2013 15:08:17"}},
		{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"200","T3":"10","T4":"200","TT":"19,8999996185303","TA":"36","PP":"0","DATE":"31/08/2013 15:11:56"}},
		{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"7","T2":"200","T3":"13","T4":"200","TT":"20,2000007629395","TA":"38,5999984741211","PP":"0","DATE":"01/09/2013 15:09:10"}},
		{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"10","T2":"200","T3":"16","T4":"200","TT":"19,7999992370605","TA":"38,5999984741211","PP":"0","DATE":"02/09/2013 15:11:09"}},
		{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"23","T2":"200","T3":"29","T4":"200","TT":"20,5","TA":"45,7999992370605","PP":"0","DATE":"04/09/2013 15:03:29"}},
		{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"200","T3":"25","T4":"200","TT":"21","TA":"39,2000007629395","PP":"0","DATE":"05/09/2013 15:02:25"}},
		{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"200","T3":"11","T4":"200","TT":"18,6000003814697","TA":"31,5","PP":"0","DATE":"08/09/2013 15:02:19"}},
		{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"198","T3":"10","T4":"199","TT":"19,2000007629395","TA":"31,2000007629395","PP":"0","DATE":"10/09/2013 15:16:29"}}
	]]
}

Avec quelle méthode boucleriez vous sur ces données ?

Je fait deux boucles (pas très optimisé, j'y travaille) !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
var dates = new Array();
var T1 = new Array();
var T2 = new Array();
 
$.getJSON(url+"GetRecord/"+NumAi+"/"+nbDays+"/", 
 
		function(data) {
 
			$.each(data.result[0], function(index) {
 
				$.each(data.result[0][index], function(record) {
 
					if(record.DATE != undefined)		dates.push(record.DATE);
					if(record.T1 != undefined)			T1.push(record.T1);
					if(record.T2 != undefined)			T2.push(record.T2);
 
				});
			});

Le problème est qu'après ce code j'affiche des graphiques (T1, T2, etc...) avec highchart, mais les valeurs des tableaux sont égales à zéro...

16/09/2013, 18h45
NoSmoking

Bonjour,
regarde quand même si hightChar n'attend pas plutôt des number et non des string pour les données tracées.

Bonsoir

Des nombres pour un graphique, et le parcours des données (avec AJAX dataset est data), un graphique par série de données :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
var dataset = {
	"result" : [
		[
			{
				"type" : "ServerMethodsUnit.TRecord",
				"id" : 1,
				"fields" : {
					"T1" : "9",
					"T2" : "200",
					"T3" : "15",
					"T4" : "200",
					"TT" : "19,7999992370605",
					"TA" : "32,9000015258789",
					"PP" : "0",
					"DATE": "28/08/2013 15:04:37"
				}
			},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"4","T2":"153","T3":"8","T4":"157","TT":"20,2999992370605","TA":"23,1000003814697","PP":"0","DATE":"29/08/2013 18:06:51"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"200","T3":"13","T4":"200","TT":"19,7999992370605","TA":"32,0999984741211","PP":"0","DATE":"30/08/2013 15:08:17"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"200","T3":"10","T4":"200","TT":"19,8999996185303","TA":"36","PP":"0","DATE":"31/08/2013 15:11:56"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"7","T2":"200","T3":"13","T4":"200","TT":"20,2000007629395","TA":"38,5999984741211","PP":"0","DATE":"01/09/2013 15:09:10"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"10","T2":"200","T3":"16","T4":"200","TT":"19,7999992370605","TA":"38,5999984741211","PP":"0","DATE":"02/09/2013 15:11:09"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"23","T2":"200","T3":"29","T4":"200","TT":"20,5","TA":"45,7999992370605","PP":"0","DATE":"04/09/2013 15:03:29"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"200","T3":"25","T4":"200","TT":"21","TA":"39,2000007629395","PP":"0","DATE":"05/09/2013 15:02:25"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"200","T3":"11","T4":"200","TT":"18,6000003814697","TA":"31,5","PP":"0","DATE":"08/09/2013 15:02:19"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"198","T3":"10","T4":"199","TT":"19,2000007629395","TA":"31,2000007629395","PP":"0","DATE":"10/09/2013 15:16:29"}}
		],
		[
			{
				"type" : "ServerMethodsUnit.TRecord",
				"id" : 1,
				"fields" : {
					"T1" : "9",
					"T2" : "200",
					"T3" : "15",
					"T4" : "200",
					"TT" : "19,7999992370605",
					"TA" : "32,9000015258789",
					"PP" : "0",
					"DATE": "28/08/2013 15:04:37"
				}
			},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"4","T2":"153","T3":"8","T4":"157","TT":"20,2999992370605","TA":"23,1000003814697","PP":"0","DATE":"29/08/2013 18:06:51"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"200","T3":"13","T4":"200","TT":"19,7999992370605","TA":"32,0999984741211","PP":"0","DATE":"30/08/2013 15:08:17"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"200","T3":"10","T4":"200","TT":"19,8999996185303","TA":"36","PP":"0","DATE":"31/08/2013 15:11:56"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"7","T2":"200","T3":"13","T4":"200","TT":"20,2000007629395","TA":"38,5999984741211","PP":"0","DATE":"01/09/2013 15:09:10"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"10","T2":"200","T3":"16","T4":"200","TT":"19,7999992370605","TA":"38,5999984741211","PP":"0","DATE":"02/09/2013 15:11:09"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"23","T2":"200","T3":"29","T4":"200","TT":"20,5","TA":"45,7999992370605","PP":"0","DATE":"04/09/2013 15:03:29"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"200","T3":"25","T4":"200","TT":"21","TA":"39,2000007629395","PP":"0","DATE":"05/09/2013 15:02:25"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"200","T3":"11","T4":"200","TT":"18,6000003814697","TA":"31,5","PP":"0","DATE":"08/09/2013 15:02:19"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"198","T3":"10","T4":"199","TT":"19,2000007629395","TA":"31,2000007629395","PP":"0","DATE":"10/09/2013 15:16:29"}}
		]
	]
};
 
	var dates = [],
		T1 = [],
		T2 = [];
 
	for ( var n in dataset[ "result" ] ){
 
		 // initialiser pour un nouveau graphique
		dates = [];
		T1 = [];
		T2 = [];
 
		for (var m in dataset[ "result" ][ n ] ){
			$.each( dataset[ "result" ][ n ][ m ], function( i, item ){
				if ( i === "fields" ){
					$.each( item, function( name, value ){
						switch( name ){
							case "DATE" :
								dates.push( value );
								break;
							case "T1" :
								T1.push( parseInt( value, 10 ) );
								break;
							case "T2" :
								T2.push( parseInt( value, 10 ) );
								break;
						};
					});	
				}
			});
		}
 
		// données pour un graphique
		console.log( "dates = ", dates.join() );
		console.log( "Ti = ", T1.join() );
		console.log( "T2 = ", T2.join() );
 
	}

17/09/2013, 09h46
LaurentC33

Bonjour,

Merci beaucoup messieurs, c'était bien cela !
Ton code marche à merveille Daniel :D
Ca fait trop longtemps que j'ai touché à js !!

:oops: j'ai l'impression que je suis passé à coté du VRAI problème.

Daniel y a t-il une raison particulière pour ne pas utiliser uniquement $.each vu que tu utilises un for..in, j'aurais eu tendance à écrire.
Code:

1 2 3 4 5 6 7 8 9 10 11 $.each( dataset.result, function( ind, item){ $.each( item, function( ind, tab){ $.each( tab.fields, function ( champ, valeur) { switch( champ){ case "DATE" : dates.push( valeur);break; case "T1" : T1.push( valeur);break; case "T2" : T2.push( valeur);break; }; }); }); });

Pour les arrays j'ai tendance à privilégier les méthodes JS pensant qu'elles sont plus rapides.

Si je manipule des objets jQuery je reviens vers l'antique $.each() ou $( selector ).each() car la méthode forEach() de ES5 ne manipule que des arrays. Mais il est tout à fait possible de se passer des méthodes each() de jQuery.

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
var dataset = {
	"result" : [
		[
			{
				"type" : "ServerMethodsUnit.TRecord",
				"id" : 1,
				"fields" : {
					"T1" : "9",
					"T2" : "200",
					"T3" : "15",
					"T4" : "200",
					"TT" : "19,7999992370605",
					"TA" : "32,9000015258789",
					"PP" : "0",
					"DATE": "28/08/2013 15:04:37"
				}
			},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"4","T2":"153","T3":"8","T4":"157","TT":"20,2999992370605","TA":"23,1000003814697","PP":"0","DATE":"29/08/2013 18:06:51"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"200","T3":"13","T4":"200","TT":"19,7999992370605","TA":"32,0999984741211","PP":"0","DATE":"30/08/2013 15:08:17"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"200","T3":"10","T4":"200","TT":"19,8999996185303","TA":"36","PP":"0","DATE":"31/08/2013 15:11:56"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"7","T2":"200","T3":"13","T4":"200","TT":"20,2000007629395","TA":"38,5999984741211","PP":"0","DATE":"01/09/2013 15:09:10"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"10","T2":"200","T3":"16","T4":"200","TT":"19,7999992370605","TA":"38,5999984741211","PP":"0","DATE":"02/09/2013 15:11:09"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"23","T2":"200","T3":"29","T4":"200","TT":"20,5","TA":"45,7999992370605","PP":"0","DATE":"04/09/2013 15:03:29"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"200","T3":"25","T4":"200","TT":"21","TA":"39,2000007629395","PP":"0","DATE":"05/09/2013 15:02:25"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"200","T3":"11","T4":"200","TT":"18,6000003814697","TA":"31,5","PP":"0","DATE":"08/09/2013 15:02:19"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"198","T3":"10","T4":"199","TT":"19,2000007629395","TA":"31,2000007629395","PP":"0","DATE":"10/09/2013 15:16:29"}}
		],
		[
			{
				"type" : "ServerMethodsUnit.TRecord",
				"id" : 1,
				"fields" : {
					"T1" : "9",
					"T2" : "200",
					"T3" : "15",
					"T4" : "200",
					"TT" : "19,7999992370605",
					"TA" : "32,9000015258789",
					"PP" : "0",
					"DATE": "28/08/2013 15:04:37"
				}
			},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"4","T2":"153","T3":"8","T4":"157","TT":"20,2999992370605","TA":"23,1000003814697","PP":"0","DATE":"29/08/2013 18:06:51"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"200","T3":"13","T4":"200","TT":"19,7999992370605","TA":"32,0999984741211","PP":"0","DATE":"30/08/2013 15:08:17"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"200","T3":"10","T4":"200","TT":"19,8999996185303","TA":"36","PP":"0","DATE":"31/08/2013 15:11:56"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"7","T2":"200","T3":"13","T4":"200","TT":"20,2000007629395","TA":"38,5999984741211","PP":"0","DATE":"01/09/2013 15:09:10"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"10","T2":"200","T3":"16","T4":"200","TT":"19,7999992370605","TA":"38,5999984741211","PP":"0","DATE":"02/09/2013 15:11:09"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"23","T2":"200","T3":"29","T4":"200","TT":"20,5","TA":"45,7999992370605","PP":"0","DATE":"04/09/2013 15:03:29"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"200","T3":"25","T4":"200","TT":"21","TA":"39,2000007629395","PP":"0","DATE":"05/09/2013 15:02:25"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"200","T3":"11","T4":"200","TT":"18,6000003814697","TA":"31,5","PP":"0","DATE":"08/09/2013 15:02:19"}},
			{"type":"ServerMethodsUnit.TRecord","id":1,"fields":{"T1":"6","T2":"198","T3":"10","T4":"199","TT":"19,2000007629395","TA":"31,2000007629395","PP":"0","DATE":"10/09/2013 15:16:29"}}
		]
	]
};
 
var dates = [],
	T1 = [],
	T2 = [];
 
dataset.result.forEach( function( valueN, indexN ){
 
	dates = [];
	T1 = [];
	T2 = [];
 
	valueN.forEach( function( valueM, indexM ){
 
		Object.keys( valueM.fields ).forEach( function ( valueF, indexF ){
 
			switch( valueF ){
				case "DATE" : 
					dates.push( valueM.fields[ valueF ] );
					break;
				case "T1" : 
					T1.push( valueM.fields[ valueF ] ); 
					break;
				case "T2" : 
					T2.push( valueM.fields[ valueF ] ); 
					break;
      		};
    	});
  	});
 
	console.log( "dates = ", dates.join() );
	console.log( "Ti = ", T1.join() );
	console.log( "T2 = ", T2.join() );
});

18/09/2013, 19h13
NoSmoking

Merci daniel, je m'attendais un peu à une réponse dans ce sens.