Question récupération de données

**kaari kosaku** · 03/07/2014, 11h27

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 :

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

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

**Watilin** · 03/07/2014, 15h08

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 :

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
[
    {
        '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.

**patarins** · 03/07/2014, 19h08

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

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

**kaari kosaku** · 03/07/2014, 20h21

bah oui, tout ça :

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

**Watilin** · 03/07/2014, 20h42

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 :

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

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 :

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

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

**patarins** · 04/07/2014, 10h52

Bonjour,

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

Code javascript :

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

**Watilin** · 04/07/2014, 15h03

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 :

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

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 :

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

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

**patarins** · 04/07/2014, 21h18

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.

**NoSmoking** · 04/07/2014, 22h24

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

Code :

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

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

**NoSmoking** · 05/07/2014, 11h18

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

Question récupération de données

JavaScript

Discussions similaires

Partager

Partager