Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre du Club
    Homme Profil pro
    Intérimaire
    Inscrit en
    mai 2017
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Intérimaire

    Informations forums :
    Inscription : mai 2017
    Messages : 70
    Points : 55
    Points
    55

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

    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 : 35
Taille : 32,3 Ko

    Je vous remercie d'avance

  2. #2
    Membre expérimenté Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 013
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 013
    Points : 1 651
    Points
    1 651

    Par défaut

    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.

  3. #3
    Membre du Club
    Homme Profil pro
    Intérimaire
    Inscrit en
    mai 2017
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Intérimaire

    Informations forums :
    Inscription : mai 2017
    Messages : 70
    Points : 55
    Points
    55

    Par défaut

    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

  4. #4
    Membre expérimenté Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 013
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 013
    Points : 1 651
    Points
    1 651

    Par défaut

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

  5. #5
    Membre du Club
    Homme Profil pro
    Intérimaire
    Inscrit en
    mai 2017
    Messages
    70
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Intérimaire

    Informations forums :
    Inscription : mai 2017
    Messages : 70
    Points : 55
    Points
    55

    Par défaut

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

Discussions similaires

  1. parser un fichier contenant des données au format JSON
    Par Jasmine80 dans le forum Modules
    Réponses: 2
    Dernier message: 08/09/2017, 22h25
  2. Réponses: 11
    Dernier message: 28/04/2015, 18h47
  3. Réponses: 9
    Dernier message: 27/01/2015, 22h42
  4. Variable contenant des variables ?
    Par Bne dans le forum Fichiers
    Réponses: 4
    Dernier message: 30/05/2006, 16h09
  5. Recuperer une variable contenant des espaces
    Par phpaide dans le forum Formulaires
    Réponses: 9
    Dernier message: 30/05/2006, 16h07

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo