Variable contenant des données issues d'un json ne se vide pas à chaque évenement 'change'

**Bensljul** · 07/08/2019, 16h52

Bonjour,

J'ai réalisé un code à partir d'un MonthPicker.js et j'ai un souci car j'ai une array qui ne se vide a chaque changement.
je m'explique :

le month picker permet de choisir de charger un json en fonction du mois (si on selectionne July , le js va charger le fichier 07-19.json) a ce niveau là il n'y a pas de problème.. et ensuite je génére des liste de sélections en fonction de ce que je souhaite afficher^^

probleme c que mon 2eme array ne se "vide" pas, et se charge 2,3 fois a chaque changement de mois XD et j'arrive pas à comprendre d'où cela vient XD

voici mes code :

HTML:

Code html :

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
<!DOCTYPE html>
<html>
 
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Test</title>
	<link src="test-graph.css" rel="stylesheet" type="text/css" />
	<link src="css/MonthPicker.css" rel="stylesheet" type="text/css" />
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/jquery-ui.min.js"></script>
	<script src="js/chart.min.js"></script>
	<script src="js/MonthPicker.js"></script>
	<script src="test-graph_v5.1.js" ></script>
</head>
<body>
	<div id="selection_mois">
		<p>Quel mois souhaitez vous consulter ? </p>
		<input id="monthpicker">
	</div>
	<div id="statistiques"></div>
	<div id="selections_donnees">
		<div id="mensuelle">
			<select id="selection_rp_mensuel">
			</select>
			<select id="selection_ws_mensuel">
			</select>
		</div>
		<div id="journalier">
			<input id="day">
			<select id="selection_rp_journalier">
				<option value="" disabled selected>Sélectionnez le reverse-proxy</option>
			</select>
			<select id="selection_ws_journalier">
				<option value="" disabled selected>Sélectionnez le webservice</option>
			</select>
		</div>
	</div>
	<div id="graphiques">
	</div>
</body>
</html>

JS:

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
$(document).ready(function(){
	var $month=$('#monthpicker'),
		$day=$('#day'),
		$selection_mois=$('#selection_mois'),
		$selection_donnees=$('#selections_donnees'),
		$selection_rp_mensuel=$('#selection_rp_mensuel'),
		$selection_ws_mensuel=$('#selection_ws_mensuel'),
		$selection_rp_journalier=$('#selection_rp_journalier'),
		$selection_ws_journalier=$('#selection_ws_journalier'),
		$stats=$('#statistiques'),
		$graph=$('#graphiques'),
		month='',
		periode='';
 
	// Fonction pour enlever les doublons
 
	function removeDuplicates(num) {
	  let x;
	  const len=num.length;
	  const out=[];
	  const obj={};
 
	  for (x=0; x<len; x++) {
		obj[num[x]]=0;
	  }
	  for (x in obj) {
		out.push(x);
	  }
	  return out;
	};
 
	//début
 
	$selection_donnees.hide();
 
	$month.MonthPicker({
		Button: '<img class="icon" src="icon.gif" />',
		MonthFormat: 'mm-y',
		OnAfterMenuClose: function () {
			month=$(this).val();
			console.log(month);
			$graph.empty();
			$stats.empty();
			$selection_donnees.hide();
			$selection_ws_mensuel.empty();
			$selection_rp_mensuel.empty();
			$stats.append("<p>Quelles statistiques souhaitez vous?</p>")
			$stats.append("<select id='periode'><option disabled selected>Statistiques</option><option>mensuelle</option><option>journalière</option></select>")
			$('#periode').on('change',function(){
				periode=$('#periode option:selected').text();
				$selection_ws_mensuel.empty();
				if( periode == "mensuelle") {
 
					$selection_donnees.show();
					$selection_donnees.children().hide();
					$selection_donnees.children('#'+periode).show();
					$selection_rp_mensuel.empty();
					$selection_rp_mensuel.append('<option disabled selected>Sélectionnez le reverse-proxy</option>');
					$selection_ws_mensuel.append('<option disabled selected>Sélectionnez le webservice</option>');
 
				$.ajaxSetup({cache: false});
				//Chargement des selecteurs
					//	Reverse proxy
					$.getJSON(month+'.json',function(rp_stats){
						var date_value=[],
							tmp_rp_value=[],
							rp_value=[];
 
						$.each(rp_stats,function(date){
							date_value.push(date);
							$.each(rp_stats[date], function(reverseproxy){
								tmp_rp_value.push(reverseproxy);
								rp_value=removeDuplicates(tmp_rp_value);
							});
						});
						console.log(rp_value);
						// console.log(rp_value);
						for (var index in rp_value){
							$selection_rp_mensuel.append('<option>'+rp_value[index]+'</option>');
						}
						$.ajaxSetup({cache: false});
					});
						//Affichage des webservices en fonctiondu rp sélectionné
					$selection_rp_mensuel.on('change',function(){
						var tmp_ws_value=[],
							ws_value='';
						$graph.empty();
						ws_value=[];
						rp=$('#selection_rp_mensuel option:selected').text();
						$.getJSON(month+'.json',function(rp_stats){
							$.each(rp_stats,function(date){
								$.each(rp_stats[date], function(reverseproxy){
									$.each(rp_stats[date][rp], function(webservices){
										tmp_ws_value.push(webservices)
										ws_value=removeDuplicates(tmp_ws_value);
									});
								});
							});
						console.log(ws_value);
						});
						$.ajaxSetup({cache: false});
						for (var index in ws_value){
								$selection_ws_mensuel.append('<option>'+ws_value[index]+'</option>');
							}
					});
				}
			});
		}
	});
});

et je vous met en PJ une capture d'écran du console.log() que j'obtiens

Nom : Capture.PNG
Affichages : 215
Taille : 32,3 Ko

Je vous remercie d'avance

**Toufik83** · 07/08/2019, 18h51

Salut,

Apparemment ce n'est pas le tableau ws_value qui pose problème, mais plutôt son <select> correspondant qui n'est pas vidé à chaque événement change.

Essaies de vider le select avant de faire le append :

Code :

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

1
2
3
4
5
 
$selection_ws_mensuel.html("");//vider le select d'abord
for (var index in ws_value){
	$selection_ws_mensuel.append('<option>'+ws_value[index]+'</option>');//ensuite le remplir ici
}

La même chose pour le select $selection_rp_mensuel.

Une autre remarque :

Code :

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

1
2
3
4
 
$('#periode').on('change',function(){...
     $selection_rp_mensuel.on('change',function(){...});
});

Le 2éme déclencheur d'événement doit être à l'extérieur du premier et pas à l'intérieur.

**Bensljul** · 14/08/2019, 11h32

Merci beaucoup

ce qui est drole c'est que ca ca marche mais j'ai un autre problème ^^

j'ai un datepicker ou je selectionne la date sous ce format la :"01-08-19", que je met dans une variable day. ensuite je fais une variable month a partir de day en utilisant substring ^^

je sélectionne le 01-08-19 ca marche pas de souci ^^ mais quand je veux aller en Juillet, cela ne m'affiche plus les wb service car il me met :

TypeError: stat[day] is undefined[En savoir plus]

j'ai recréer mon problème en plus simple ici :
https://repl.it/@JulienBensliman/TESTING
https://testing--julienbensliman.repl.co/

et je comprend pas pourquoi lol

**Toufik83** · 14/08/2019, 19h19

Pourquoi ne pas vérifier l'existence de la variable stat[day] avant de faire le traitement ?

Code :

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

1
2
3
if(stat[day]){
    $.each(stat[day],function(rp){...});
}

**Bensljul** · 16/08/2019, 08h39

ben parce que ca marche une premiere fois quand je regarde les jours en aout , c'est quand je veux regarder en Juillet là ça ne fonctionne plus ^^

Variable contenant des données issues d'un json ne se vide pas à chaque évenement 'change'

jQuery

Discussions similaires

Partager

Partager