Discussion :

[Cisman]

Bonjour, j
j'ai une fonction qui lit un fichier xml (litDonnees(), après le lecture de ce fichier, je dois mettre à jour un objet valeursCourantes avec les données lues en xml.
Problème, tant que je reste dans ma fonction litDonnees, les console.log me renvoient bien les données lue en xml.
une fois en dehors de cette fonction, quand j'essaie de faire un console.log plusieurs essaie comme ci-dessous, j'ai un undefined pour litDonnees.

mon xml:

Code XML :

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

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?>
<meteo xsi:noNamespaceSchemaLocation="XSD.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <vent>41</vent>
  <pression>1040</pression>
  <temp>-6</temp>
  <visibilite >4.2</visibilite>
  <nuage>apocalypse</nuage>
</meteo>

mon 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
//table d'association des valeurs
var valeursCourantes = {
    temp : -42,
    vent : 10,
    visibilite : 5,
    pression : 1013,
    nuage : "gris"
  }
 
//lecture d'un document xml et affichage dans la console
function litDonnees() {
    $.get("donnees.xml", function(xmlDocument) {
        //console.log(xmlDocument)
        $(xmlDocument).find("meteo").each (function() {
            valeursCourantes.vent = $(this).find("vent").text();
            console.log(valeursCourantes.vent);
            valeursCourantes.pression = $(this).find("pression").text();
            console.log(valeursCourantes.pression);
            valeursCourantes.temp = $(this).find("temp").text();
            console.log(valeursCourantes.temp);
            valeursCourantes.visibilite = $(this).find("visibilite").text();
            console.log(valeursCourantes.visibilite);
            valeursCourantes.nuage = $(this).find("nuage").text();
            console.log(valeursCourantes.nuage);
            var donnees = {
                vent: valeursCourantes.vent,
                pression: valeursCourantes.pression,
                temp: valeursCourantes.temp,
                visi: valeursCourantes.visibilite,
                nuage: valeursCourantes.nuage
            };
            return donnees;
        })  
    }, "xml");
}
console.log(litDonnees().vent);
console.log(litDonnees().donnees.vent);

J'ai relu la portée des variables et sur mais rien n'y fait.

[Toufik83]

Salut,

C'est un problème de synchronisation, parce que la fonction litDonnees est asynchrone, et quand tu fais appel à celle-ci, elle prend un peu de temps (en millisecondes...) pour récupérer les valeurs du xml.

Il faut soit mettre le code qui utilise les nouvelles valeurs de valeursCourantes dans le callback de get ou bien utiliser les promesses avec $.when et $.Deferred.

Edit : essaies ceci (avec les promesses) :

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
 
var valeursCourantes = {
		temp : -42,
		vent : 10,
		visibilite : 5,
		pression : 1013,
		nuage : "gris"
	  }
 
//lecture d'un document xml et affichage dans la console
function litDonnees() {
	var donnees,deferred=$.Deferred();
	$.get("donnees.xml", function(xmlDocument) {
		 $(xmlDocument).find("meteo")
		 .each (function() {
			valeursCourantes.vent = $(this).find("vent").text();
			valeursCourantes.pression = $(this).find("pression").text();
			valeursCourantes.temp = $(this).find("temp").text();
			valeursCourantes.visibilite = $(this).find("visibilite").text();
			valeursCourantes.nuage = $(this).find("nuage").text();
			donnees = {
				vent: valeursCourantes.vent,
				pression: valeursCourantes.pression,
				temp: valeursCourantes.temp,
				visi: valeursCourantes.visibilite,
				nuage: valeursCourantes.nuage
			};
			deferred.resolve(donnees); 
		});
 
	}, "xml");
	return deferred.promise();
}
 
//Extraction des données avec $.when $.then :
$.when(litDonnees()).then(function(d){
	console.log('d.vent :',d.vent
		,', d.pression :',d.pression
		,', d.temp :',d.temp);
});

[Cisman]

Bonsoir, merci pour ta réponse.

Du coup, j'essaie avec le code suivant pour modifier mes valeursCoutantes, mais elles ont toujours leurs valeur initiales.

Code :

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

1
2
3
4
5
6
7
8
//Extraction des données avec $.when $.then :
var data=$.when(litDonnees()).then(function(d){
    valeursCourantes.vent = d.vent;
    valeursCourantes.pression = d.pression;
    valeursCourantes.temp = d.temp;
    valeursCourantes.visibilite = d.visibilite;
    valeursCourantes.nuage = d.nuage;
});

J'ai pas quand même loupé une étape sur la portée des variables?
Je suis là-dessus depuis ce matin et je sèche complétement...
Ce qui est certain, c'est que demain, mon prof ne va pas se contenter de lire son cours, il va m'expliquer.

[Toufik83]

Comment sais-tu que les valeurs n'ont pas changées? avec un console.log dans la fonction then ou bien à l'extérieur ?

[Cisman]

Le console.log dans la fonction .then fonctionne parfaitement, c'est quand j'essaie de faire une mise à jour de mon objet valeursCourantes.

Code :

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

1
2
3
4
5
6
7
8
9
 
//table d'association des valeurs
var valeursCourantes = {
    temp : -42,
    vent : 10,
    visibilite : 5,
    pression : 1013,
    nuage : "gris"
  }

[Toufik83]

Bah la mise à jour de ton objet est déjà faite dans la fonction then.
Si tu veux ajouter d'autres instructions qui utilisent l'objet valeurCourantes c'est dans then que tu dois les mettre et pas ailleurs.

[Cisman]

Comme j'ai fait ça devrait être bon, mais les console.log m'affiche encore les mauvaise valeurs.

mon

Code XML :

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

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?>
<meteo xsi:noNamespaceSchemaLocation="XSD.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <vent>41</vent>
  <pression>1040</pression>
  <temp>-6</temp>
  <visibilite >4.2</visibilite>
  <nuage>apocalypse</nuage>
</meteo>

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
//table d'association des valeurs
var valeursCourantes = {
    temp : -42,
    vent : 10,
    visibilite : 5,
    pression : 1013,
    nuage : "gris"
  }
 
//lecture d'un document xml et affichage dans la console
function litDonnees() {
	var donnees, deferred = $.Deferred();
	$.get("donnees.xml", function(xmlDocument) {
		 $(xmlDocument).find("meteo").each (function() {
			valeursCourantes.vent = $(this).find("vent").text();
			valeursCourantes.pression = $(this).find("pression").text();
			valeursCourantes.temp = $(this).find("temp").text();
			valeursCourantes.visibilite = $(this).find("visibilite").text();
			valeursCourantes.nuage = $(this).find("nuage").text();
			donnees = {
				vent: valeursCourantes.vent,
				pression: valeursCourantes.pression,
				temp: valeursCourantes.temp,
				visi: valeursCourantes.visibilite,
				nuage: valeursCourantes.nuage
			};
			deferred.resolve(donnees); 
		});
	}, "xml");
	return deferred.promise();
}
 
//Extraction des données avec $.when $.then :
var data=$.when(litDonnees()).then(function(d){
    valeursCourantes.vent = d.vent;
    valeursCourantes.pression = d.pression;
    valeursCourantes.temp = d.temp;
    valeursCourantes.visibilite = d.visibilite;
    valeursCourantes.nuage = d.nuage;
	/*console.log('d.vent :',d.vent
		,', d.pression :',d.pression
		,', d.temp :',d.temp);*/
});
 
console.log(valeursCourantes.vent);//affiche 10, devrait afficher 41
console.log(valeursCourantes.pression);//affiche 1013, devrait afficher 1040
console.log(valeursCourantes.temp);//affiche -42, devrait afficher -6
console.log(valeursCourantes.visibilite);//affiche 5, devrait afficher 4.2
console.log(valeursCourantes.nuage);//affiche gris, devrait afficher apocalypse

[Toufik83]

Mon dieu 😅, met ces console.log dans then.

[Cisman]

Dans le then, les console.log m'affiche les bonnes valeurs.
Ce que j'essaie de te dire, c'est que je dois pouvoir utiliser l'objet valeursCourantes en dehors du then.
je le lis à plein d'autre endroit dans mon code.
Et donc dans ces autres endroit, son contenu n'est pas bon.

Voici tout mon 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
"use strict";
 
//cache tous les contenants
function cacheTout() {
    'use strict';
    $(".contenant").hide();
}
 
//montre les contenants de la liste
function montre(liste) {
    'use strict';
    var i;
    for (i = 0; i < liste.length; ++i) {
        $("#" + liste[i]).show();
    }
}
 
//table d'association pour les unités de mesures
var unitesPossibles = {
    temp : ["°C", "°F", "°K"],
    vent : ["km/h", "m/s", "kts"],
    visibilite : ["km", "m"],
    pression : ["hPa", "bar"]
  }
//table d'association pour choisir les unités [x] index du tableau des unitesPossibles
var unitesChoisies = {
    temp : 0,
    vent : 0,
    visibilite : 0,
    pression : 0
  }
//table d'association des valeurs
var valeursCourantes = {
    temp : -42,
    vent : 10,
    visibilite : 5,
    pression : 1013,
    nuage : "gris"
  }
 
//lecture d'un document xml et affichage dans la console
function litDonnees() {
	var donnees, deferred = $.Deferred();
	$.get("donnees.xml", function(xmlDocument) {
		 $(xmlDocument).find("meteo").each (function() {
			valeursCourantes.vent = $(this).find("vent").text();
			valeursCourantes.pression = $(this).find("pression").text();
			valeursCourantes.temp = $(this).find("temp").text();
			valeursCourantes.visibilite = $(this).find("visibilite").text();
			valeursCourantes.nuage = $(this).find("nuage").text();
			donnees = {
				vent: valeursCourantes.vent,
				pression: valeursCourantes.pression,
				temp: valeursCourantes.temp,
				visi: valeursCourantes.visibilite,
				nuage: valeursCourantes.nuage
			};
			deferred.resolve(donnees); 
		});
	}, "xml");
	return deferred.promise();
}
 
//Extraction des données avec $.when $.then :
var data=$.when(litDonnees()).then(function(d){
    valeursCourantes.vent = d.vent;
    valeursCourantes.pression = d.pression;
    valeursCourantes.temp = d.temp;
    valeursCourantes.visibilite = d.visibilite;
    valeursCourantes.nuage = d.nuage;
	/*console.log('d.vent :',d.vent
		,', d.pression :',d.pression
		,', d.temp :',d.temp);*/
});
 
console.log(valeursCourantes.vent);//affiche 10, devrait afficher 41
console.log(valeursCourantes.pression);//affiche 1013, devrait afficher 1040
console.log(valeursCourantes.temp);//affiche -42, devrait afficher -6
console.log(valeursCourantes.visibilite);//affiche 5, devrait afficher 4.2
console.log(valeursCourantes.nuage);//affiche gris, devrait afficher apocalypse
 
 
  //calcul et renvoi le vent en fonction de l'unité choisie
function valeurVent() {
    'use strict';
    if (unitesChoisies.vent === 0) {
        console.log(valeursCourantes.vent);
        return valeursCourantes.vent;
    }
    if (unitesChoisies.vent === 1) {
        return valeursCourantes.vent / 3.6;
    }
    return valeursCourantes.vent / 1.852;
}
 
//calcul et renvoi la pression en fonction de l'unité choisie
function valeurPression() {
    'use strict';
    if (unitesChoisies.pression === 0) {
        console.log(valeursCourantes.pression);
        return valeursCourantes.pression;
    }
    return valeursCourantes.pression / 1000;
}
 
//calcul et renvoi la température en fonction de l'unité choisie
function valeurTemp() {
    'use strict';
    if (unitesChoisies.temp === 0) {
        console.log(valeursCourantes.temp);
        return valeursCourantes.temp;
    }
    if (unitesChoisies.temp === 1) {
        return (valeursCourantes.temp * 9 / 5) + 32;
    }
    return valeursCourantes.temp + 273.15;
}
 
//calcul et renvoi la visibilite en fonction de l'unité choisie
function valeurVisibilite() {
    'use strict';
    if (unitesChoisies.visibilite === 0) {
        console.log(valeursCourantes.visibilite);
        return valeursCourantes.visibilite;
    }
    return valeursCourantes.visibilite / 1000;
}
 
//calcul et renvoi la couverture nuageuse.
function valeurNuage() {
    'use strict';
    console.log(valeursCourantes.nuage);
    return valeursCourantes.nuage;
}
 
function afficher() {
    'use strict';
    $("#vent").find(".contenu").text(valeurVent());
    $("#vent").find(".unite").text(unitesPossibles.vent[unitesChoisies.vent]);
 
    $("#pression").find(".contenu").text(valeurPression());
    $("#pression").find(".unite").text(unitesPossibles.pression[unitesChoisies.pression]);
 
    $("#temp").find(".contenu").text(valeurTemp());
    $("#temp").find(".unite").text(unitesPossibles.temp[unitesChoisies.temp]);
 
    $("#visibilite").find(".contenu").text(valeurVisibilite());
    $("#visibilite").find(".unite").text(unitesPossibles.visibilite[unitesChoisies.visibilite]);
 
    $("#nuage").find(".contenu").text(valeurNuage());
}
 
$(document).ready(function() {
    cacheTout();
    montre(["temp", "vent", "visibilite", "pression", "nuage"]);
    //litDonnees();
    afficher();
});

[Toufik83]

Ce que tu vas faire c'est mettre la fonction afficher() dans then d'abord :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$.when(litDonnees()).then(function(d){
	valeursCourantes.vent = d.vent;
	valeursCourantes.pression = d.pression;
	valeursCourantes.temp = d.temp;
	valeursCourantes.visibilite = d.visibilite;
	valeursCourantes.nuage = d.nuage;
	console.log("nouvelles valeurs :",valeursCourantes);//tu peux écrire tout l'objet puis tu développe le nœud dans la console pour le visualiser. 
	afficher();// tu fais appel a afficher() ici.
});

puis tu met le when et then dans document ready, ce qui donne :

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
 
$(document).ready(function() {
    cacheTout();
    montre(["temp", "vent", "visibilite", "pression", "nuage"]);
    //Extraction des données avec $.when $.then :
    $.when(litDonnees()).then(function(d){
	valeursCourantes.vent = d.vent;
	valeursCourantes.pression = d.pression;
	valeursCourantes.temp = d.temp;
	valeursCourantes.visibilite = d.visibilite;
	valeursCourantes.nuage = d.nuage;
	console.log("nouvelles valeurs :",valeursCourantes);
	afficher();
    });
});

[Cisman]

ça fonctionne

Alors de ce que j'ai compris, comme get est asynchrone, il faut attendre que mon objet donnees soit rempli avant de pouvoir l'utiliser, dans ce cas ci, le lire et mettre à jour mes valeursCourantes.

Je dois maintenant lire un fichier JSON pour affiché les unités de mesure. Le principe va être le même.

Ensuite, avec callback, je dois lire les deux fichiers, xml er JSON, pour afficher et les valeurs lue en xml et les unités de mesures du JSON.

[Toufik83]

Oui c'est exactement ça, tu as tout compris.

L'exécution des fonctions get ,post, ajax, getJson ... est toujours asynchrone, il faut bien comprendre ce principe parce que c'est très important.

[Cisman]

Oui, le prof à juste omis de nous l'expliquer...

Un grand merci en tout cas.