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

**LaurentC33** · 16/09/2013, 17h31

Bonjour,

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

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
 
{"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 :

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
 
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...

**NoSmoking** · 16/09/2013, 19h45

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

**danielhagnoul** · 16/09/2013, 20h47

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 :

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
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() );
 
	}

**LaurentC33** · 17/09/2013, 10h46

Bonjour,

Merci beaucoup messieurs, c'était bien cela !
Ton code marche à merveille Daniel

Ca fait trop longtemps que j'ai touché à js !!

**NoSmoking** · 17/09/2013, 20h36

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
      };
    });
  });
});

**danielhagnoul** · 17/09/2013, 23h00

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 :

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
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() );
});

**NoSmoking** · 18/09/2013, 20h13

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

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

jQuery

Discussions similaires

Partager

Partager