Question récupération de données

Version imprimable

Voir 40 message(s) de cette discussion en une page

03/07/2014, 12h27
kaari kosaku

Autant pour moi, le format de ton objet c'est un tableau contenant pour chaque élément un objet avec tous les attributs.

Du coup pour accéder au nom, il faut préciser de quelle personne...
par ex :

Code:

window.alert(resParsed[0].Nom);

Voilà, c'est l'idée. Il faut repérer les différents éléments de la structure JSON. Sous les dernières versions de Firefox il y a une ardoise JavaScript (Maj+F4) dans laquelle il y a un bouton « Formater et indenter ». Si tu l'utilises sur ton code JSON, voilà ce que ça donne :
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 [ { 'id': '1', 'Nom': 'Marie-Hélène PROUST', 'Adresse': 'Pigemolle', 'Ville': '85490 BENET', 'Latitude': '46.388161', 'Longitude': '-0.575875', 'Informatique': 'PC Fixe', 'Internet': 'ADSL', 'Service': 'Oui' }, { 'id': '2', 'Nom': 'Samuel PATARIN', 'Adresse': '11, Rue de l\'Aumônerie', 'Ville': '85490 BENET', 'Latitude': '46.369358', 'Longitude': '-0.585604', 'Informatique': 'PC Portable', 'Internet': 'ADSL', 'Service': 'Non' } ]
Ainsi on voit bien les différents niveaux de la structure.

niveau 0 = l'objet entier resParsed => tableau [ ... ]
niveau 1 = par exemple resParsed[0] => objet { ... }
niveau 2 = les propriétés des objets, par exemple resParsed[0].Nom. Il y a aussi la syntaxe resParsed[0]['Nom'] qui est équivalente.

JSON et données (Suite)

J'utilise le code suivant pour récupérer les données au format JSON.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
	<script language="JavaScript">
 
	function submitForm()
	{ 
		var req = null; 
 
		document.ajax.dyn.value="Started...";
 
		if (window.XMLHttpRequest)
		{
 			req = new XMLHttpRequest();
 
		} 
		else if (window.ActiveXObject) 
		{
			try {
				req = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e)
			{
				try {
					req = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {}
			}
        	}
 
 
		req.onreadystatechange = function()
		{ 
			document.ajax.dyn.value="Wait server...";
			if(req.readyState == 4)
			{
				if(req.status == 200)
				{
					document.ajax.dyn.value=req.responseText;
					var resParsed = JSON.parse(req.responseText);
 
				 for (k in resParsed) {
                  var nom = resParsed[k].Nom;
				  var adresse = resParsed[k].Adresse;
                  var ville = resParsed[k].Ville;
                  var latitude = resParsed[k].Latitude;
                  var longitude = resParsed[k].Longitude;
				  var fixe = resParsed[k].Fixe;
				  var portable = resParsed[k].Portable;
                  var informatique = resParsed[k].Informatique;
	              var exploitation = resParsed[k].Exploitation;
		          var internet = resParsed[k].Internet;
		          var telecoms = resParsed[k].Telecoms;
		          var telephonie = resParsed[k].Telephonique;
		          var poste = resParsed[k].Poste;
		          var tvadsl = resParsed[k].TV_sur_ADSL;
		          var canalsat = resParsed[k].CanalSat;
		          var cinema = resParsed[k].Home_Cinema;
		          var lecteur = resParsed[k].Lecteur_DVD;
		          var videosurveillance = resParsed[k].Videosurveillance;
		          var detecteur = resParsed[k].Detecteur;
		          var radio = resParsed[k].Radio;
 
				  window.alert(nom + "," + ville);   //Debug
				  }
 
 
				}	
				else	
				{
					document.ajax.dyn.value="Error: returned status code " + req.status + " " + req.statusText;
				}	
			} 
		}; 
		req.open("GET", "json_mysql_2.php", true); 
		req.send(null); 
	} 
	</script>
	<title>Ajax get small example</title></head>
 
	<body>
	<FORM name="ajax" method="POST" action="">
		<p>
		<INPUT type="BUTTON" value="Envoyer"  ONCLICK="submitForm()">
		</p>
		<p>
		Reçu: <input type="text" name="dyn" size="32" value="">
		</p>
	</FORM>
	</body>
</html>

Ce code m'a servi pour tester la récupération des données mais maintenant il faut que je l'inclue dans le code de mon premier post à la place des données statiques. Mais comment faire ? Il y a certainement des choses à enlever.....
Merci d'avance....

bah oui, tout ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
                  var nom = resParsed[k].Nom;
				  var adresse = resParsed[k].Adresse;
                  var ville = resParsed[k].Ville;
                  var latitude = resParsed[k].Latitude;
                  var longitude = resParsed[k].Longitude;
				  var fixe = resParsed[k].Fixe;
				  var portable = resParsed[k].Portable;
                  var informatique = resParsed[k].Informatique;
	              var exploitation = resParsed[k].Exploitation;
		          var internet = resParsed[k].Internet;
		          var telecoms = resParsed[k].Telecoms;
		          var telephonie = resParsed[k].Telephonique;
		          var poste = resParsed[k].Poste;
		          var tvadsl = resParsed[k].TV_sur_ADSL;
		          var canalsat = resParsed[k].CanalSat;
		          var cinema = resParsed[k].Home_Cinema;
		          var lecteur = resParsed[k].Lecteur_DVD;
		          var videosurveillance = resParsed[k].Videosurveillance;
		          var detecteur = resParsed[k].Detecteur;
		          var radio = resParsed[k].Radio;

wtf xO

Il y a deux choses à changer principalement :

Il n'y a plus de variable globale tMarkers
Il faut récupérer les données dans la fonction initialize avant de les passer à setMarkers

Tu as déjà tous les éléments en main, il ne te reste qu'à assembler les morceaux. Pour te guider un peu, sache juste qu'il faudra que tu appelles setMarker dans la fonction onreadystatechange.

Pour aller plus loin, voici un conseil pour t'aider à organiser ton code. La grande majorité des librairies JavaScript proposent une fonction utilitaire pour prendre en charge Ajax, et ainsi éviter de réécrire 15 fois les mêmes lignes de code (instancier req, tester req.readyState et req.status, etc.). Dans ton cas, tu as juste besoin du plus simple : une requête GET sans paramètres. Tu peux écrire une fonction qui prend en paramètres une URL et une fonction de callback (en français fonction de rappel), c'est-à-dire une fonction qui sera appelée quand la requête est terminée.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function ajaxGet(url, callback) { var req = new XMLHttpRequest(); req.onreadystatechange = function() { if (4 === req.readyState) { if (200 === req.status) { callback(req.responseText); } else { alert('La requête a échoué !\n' + '(code = ' + res.status + ', ' + req.statusText + ')'); } } }; req.open('GET', url); req.send(); }
Et voici un exemple de la façon de s'en servir :
Code:

1 2 3 4 ajaxGet('json_mysql_2.php', function(responseText) { var tMarker = JSON.parse(responseText); ... });

JSON et données (Suite)

Bonjour,

J'ai modifié le code du premier post de la manière suivante :

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
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
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Carte des clients</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="utils.js"></script> 
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
<script type="text/javascript">
 
 
// Set the Map variable
var map;
 
function ajaxGet(url, callback) {
   var req = new XMLHttpRequest();
   req.onreadystatechange = function() {
      if (4 === req.readyState) {
         if (200 === req.status) {
            callback(req.responseText);
         } else {
            alert('La requête a échoué !\n' +
               '(code = ' + res.status + ', ' + req.statusText + ')');
         }
      }
   };
   req.open('GET', url);
   req.send();
}
 
function initialize() {
    var myOptions = {
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var infoWindow = new google.maps.InfoWindow;
    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    // Set the center of the map
    var pos = new google.maps.LatLng(46.368333, -0.596111);
    map.setCenter(pos);
 
	ajaxGet('json_mysql_2.php', function(responseText) {
    var tMarker = JSON.parse(responseText);
 
	});
 
	setMarkers(map, tMarker)
};
function setMarkers(map, tMarker) {
    for (var i in tMarker) {
        var lat = tMarker[i].lat;
        var lng = tMarker[i].lon;
        var locNr = tMarker[i].locNr;
		var nom = tMarker[i].nom;
        var city = tMarker[i].city;
        var land = tMarker[i].land;
        var fixe = tMarker[i].fixe;
		var portable = tMarker[i].portable;
        var informatique = tMarker[i].informatique;
	    var exploitation = tMarker[i].exploitation;
		var internet = tMarker[i].internet;
		var telecoms = tMarker[i].telecoms;
		var telephonie = tMarker[i].telephonie;
		var poste = tMarker[i].poste;
		var tvadsl = tMarker[i].tvadsl;
		var canalsat = tMarker[i].canalsat;
		var home = tMarker[i].home;
		var lecteur = tMarker[i].lecteur;
		var videosurveillance = tMarker[i].videosurveillance;
		var detecteur = tMarker[i].detecteur;
		var radio = tMarker[i].radio;
 
		var latlngset = new google.maps.LatLng(lat, lng);
        var oMarkOpt = {
            position: latlngset,
            map: map,
            title: city
        };
        var marker = new google.maps.Marker(oMarkOpt);
        var contentInfoWindow = ['<div id="InfoText">', '<div class ="tabs">', '<ul>', '<li><a href="#tab1">General</a></li>','<li><a href="#tab2">Configuration</a></li>','<li><a href="#tab3" id="SV">Street View</a></li>', '</ul>', '<div id="tab1">', '<h3><font color=\"#8A40A4\">' + nom + '</font></h3>', '<p>' + locNr + '<BR>' + city + '<BR>' + land + '<BR><BR>Téléphone fixe : ' + fixe + '<BR>Téléphone portable : ' + portable + '</p>', '</div>', '<div id="tab2">', '<p><font color=\"#8A40A4\">Informatique : </font>' + informatique + '<BR>Système d\'exploitation : ' + exploitation + '<BR>Connexion Internet : ' + internet + '<BR>Opérateur Télécoms : ' + telecoms + '<BR>Téléphonie : ' + telephonie + '<BR>Nbre de postes téléphoniques : ' + poste + '<BR>TV sur ADSL : ' + tvadsl + '<BR>CanalSat : ' + canalsat + '<BR>Home Cinéma : ' + home + '<BR>Lecteur DVD : ' + lecteur + '<BR>Système de vidéosurveillance : ' + videosurveillance + '<BR>Détecteur de fumée : ' + detecteur + '<BR>Radio Numérique : ' + radio + '</p>', '</div>', '<div id="tab3">', '<div id="pano"></div>', '</div>'].join('');
        var infoWindowOptions = {
            content: contentInfoWindow,
            position: latlngset
        };
        var infowindow = new google.maps.InfoWindow(infoWindowOptions);
        setEventMarker(marker, infowindow);
    } // For
};
 
 
function setEventMarker(marker, infowindow) {
    google.maps.event.addListener(marker, "click", function () {
        infowindow.open(this.getMap(), this);
    });
    var panoramaOptions = {
        position: marker.position
    };
    google.maps.event.addListener(infowindow, 'domready', function () {
        $(".tabs").tabs();
        $('#SV').click(function () {
            var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
            map.setStreetView(panorama);
        });
    });
};
// Initializes the Google Map
google.maps.event.addDomListener(window, 'load', initialize);
 
</script> 
<style>
#infotext {
  font-size:12px;
  width:480px;
  height:380px;
}
.tabs {
  width:450px;
  height:350px;
}
#pano {
  width:350px;
  height: 250px;
}
</style>
</head> 
<body> 
  <div id="map_canvas" style="width:100%; height:100%"></div>
  <!-- <div id='pano' style='position: absolute: top: 40px; left: 2px; width: 380px; height:290px;'></div> --> 
</body> 
</html>

J'ai vérifié que les données étaient bien recupérées, la carte s'affiche correctement mais pas les points. Est ce qu'il faut que je modifie la fonction SetMarkers. Je pense que oui mais comment récupérer les données dans cette fonction pour les afficher ? Il doit me manquer quelquechose ?

04/07/2014, 16h03
Watilin
Rassure-toi il ne manque rien à la fonction setMarkers. Simplement, tu t'es fait avoir par l'aspect asynchrone d'Ajax. C'est normal, tout le monde se fait avoir au début.

Ça c'est ton code actuel :
Code:

1 2 3 4 5 6 7 8 9 10 function initialize() { ... ajaxGet('json_mysql_2.php', function(responseText) { var tMarker = JSON.parse(responseText); }); setMarkers(map, tMarker) };
Voilà ce qui se passe : quand le script appelle la fonction ajaxGet, ça lance une requête Ajax, qui va vivre sa vie de son côté. Le script continue son exécution immédiatement ! Donc la fonction setMarkers est appelée avant que la réponse n'ait eu le temps d'arriver.

En plus, tu as un problème de portée : la variable tMarker est déclarée avec var dans le contexte de la fonction callback. Donc en dehors de cette fonction, elle n'est pas définie.

Pour que ça marche il suffit de faire comme ça :
Code:

1 2 3 4 ajaxGet('json_mysql_2.php', function(responseText) { var tMarker = JSON.parse(responseText); setMarkers(map, tMarker); });
04/07/2014, 22h18
patarins

JSON et données (Suite et fin)

J'ai effectué la modifications et tout fonctionne correctement, j'affiche sur ma carte les points avec les données issues de la base MySQL.
Je voudrais donc vous remercier pour l'ensemble de l'aide que vous m'avez apporté. Vous avez pris le temps de m'expliquer étapes par étapes ce qu'il fallait faire tout en me laissant chercher de mon côté.

Sympa de votre part....Bonne continuation.
04/07/2014, 23h24
NoSmoking

Attendu que tu charges jQuery, tu aurais pu tirer avantage à t'en servir au mieux, voir jQuery.ajax().

Juste une remarque, j'aime bien cette ligne :mrgreen:

Code:

var contentInfoWindow = ['<div id="InfoText">', '<div class ="tabs">', '<ul>', '<li><a href="#tab1">General</a></li>','<li><a href="#tab2">Configuration</a></li>','<li><a href="#tab3" id="SV">Street View</a></li>', '</ul>', '<div id="tab1">', '<h3><font color=\"#8A40A4\">' + nom + '</font></h3>', '<p>' + locNr + '<BR>' + city + '<BR>' + land + '<BR><BR>Téléphone fixe : ' + fixe + '<BR>Téléphone portable : ' + portable + '</p>', '</div>', '<div id="tab2">', '<p><font color=\"#8A40A4\">Informatique : </font>' + informatique + '<BR>Système d\'exploitation : ' + exploitation + '<BR>Connexion Internet : ' + internet + '<BR>Opérateur Télécoms : ' + telecoms + '<BR>Téléphonie : ' + telephonie + '<BR>Nbre de postes téléphoniques : ' + poste + '<BR>TV sur ADSL : ' + tvadsl + '<BR>CanalSat : ' + canalsat + '<BR>Home Cinéma : ' + home + '<BR>Lecteur DVD : ' + lecteur + '<BR>Système de vidéosurveillance : ' + videosurveillance + '<BR>Détecteur de fumée : ' + detecteur + '<BR>Radio Numérique : ' + radio + '</p>', '</div>', '<div id="tab3">', '<div id="pano"></div>', '</div>'].join('');
05/07/2014, 12h18
NoSmoking

Re,
je pense que tu vas pouvoir également fermer cette discussion Insérer streetview dans une infobulle.
Merci.

Voir 40 message(s) de cette discussion en une page