Je veux utiliser JSON??

linda - Modifié par linda le 23/03/2016 à 16:20
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 - 24 mars 2016 à 00:49
Bonjour,
Je récupère des éléments de ma base de donnée MySql en php (via fetch ()), et j'aimerai renvoyer ces éléments sous forme de variable va1 et va2 dans mon code javascript.

mon code php:
<?php
 
try
 
{
 
$bdd = new PDO('mysql:host=localhost;dbname=data_marker', 'root', '');
 
}
 
catch (Exception $e)
 
{
 
die('Erreur : ' . $e->getMessage());
 
  
 
}
 
$Latitude = json_encode( $bdd->query('SELECT (lat) FROM markers')->fetchAll(PDO::FETCH_COLUMN, 0), JSON_NUMERIC_CHECK);
 
$Longitude = json_encode( $bdd->query('SELECT (lng) FROM markers')->fetchAll(PDO::FETCH_COLUMN, 0),JSON_NUMERIC_CHECK);
 
$reponse->closeCursor(); // Termine le traitement de la requête
 
  
 
 ?>

mon code java script:
function initialize(){
 
var mapOptions={
 
zoom: 6, // 0 à 21
 
center: new google.maps.LatLng(47,2), // centre de la carte
 
mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID, TERRAIN
 
}
 
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
 
  
 
var myLatLng= new google.maps.LatLng(va1,va2);
 
var marker = new google.maps.Marker ({
 
position: myLatLng,
 
map: map,
 
titre: "Auriac-sur-vendinelle"
 
});
 
 
 
var myLatLng2 = new google.maps.LatLng(43.6,2.25);
 
var marker2 = new google.maps.Marker ({
 
position: myLatLng2,
 
map: map,
 
titre: "Castres"
 
});
 
 
 
//trajet 1
 
var directionsService = new google.maps.DirectionsService();
 
var directionsDisplay = new google.maps.DirectionsRenderer({
 
'map': map
 
});
 
 
 
var request = {
 
origin: myLatLng,
 
destination: myLatLng2,
 
travelMode: google.maps.DirectionsTravelMode.DRIVING,
 
unitSystem: google.maps.DirectionsUnitSystem.METRIC
 
};
 
 
 
directionsService.route(request, function(response, status){
 
if(status == google.maps.DirectionsStatus.OK){
 
directionsDisplay.setDirections(response);
 
directionsDisplay.suppressMarkers = false;
 
directionsDisplay.setOptions({
 
polylineOptions: {strokeColor: '#008000'},
 
preserveViewport: false
 
});
 
}
 
});
 
 
 
  
 
}

1 réponse

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
23 mars 2016 à 17:39
Bonjour,


1 - Tu aurais pu continuer dans la conversation initiale au lieu d'ouvrir une nouvelle discussion !
Donc tu as le choix ... soit tu fermes la précédente .... soit tu retourne dans la discussion initiale et je clos celle là !!!

2 - Pourquoi faire deux requêtes .. alors qu'une seule suffit ???
 
$Latitude = json_encode( $bdd->query('SELECT (lat) FROM markers')->fetchAll(PDO::FETCH_COLUMN, 0), JSON_NUMERIC_CHECK);
 
$Longitude = json_encode( $bdd->query('SELECT (lng) FROM markers')->fetchAll(PDO::FETCH_COLUMN, 0),JSON_NUMERIC_CHECK);
 


A changer par :


try{
  $sql = "SELECT lat,lng FROM markers";
  $sth = $bdd->prepare($sql) ;
  $sth->execute();

  //On stocke le résultat en ARRAY
  $result = $sth->fetchAll();

} catch (Exception $e) {
  die('Erreur : ' . $e->getMessage());
}

//on convertit en JSON
$arr_Json = json_encode($result);




Ensuite.... on ne sait rien de la structure de ton site .... Où se trouve ton code php.. par rapport à ton code javascript ??
As tu enfin accepté d'utiliser de l' AJAX comme je te l'ai proposé ??

Merci d'être plus précise !!!!

0
bonjour
1-je préfère que je ferme la précédente;mais j'ai essayé de la supprimer mais j'ai pas pu!
2- pour mon travail,j'ai un prog en javascript et l'autre en php et je veux récupérer des éléments de ma base de donnée MySql en php (via fetch ()), et j'aimerais renvoyer ces éléments sous forme de variable va1 et va2 dans mon code javascript.
3-j'ai accepté d'utiliser de l' AJAX comme vous m'avez proposé ^^
Merci
Et comment je récupéré un seule élément du tableaux puis récupérer sa valeur en javascript
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344 > linda
23 mars 2016 à 19:36

3-j'ai accepté d'utiliser de l' AJAX comme vous m'avez proposé ^^
Merci
Et comment je récupéré un seule élément du tableaux puis récupérer sa valeur en javascript

Il faut, pour que l'on puisse t'aider, avoir l'intégralité de ton code JAVASCRIPT (celui que tu as mis en place pour l'AJAX).


1-je préfère que je ferme la précédente;mais j'ai essayé de la supprimer mais j'ai pas pu!

Je m'en occupe.
0
D'accord je vais envoyer tout le travail:
index.php:

<!DOCTYPE html>
<html>
 <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Google Maps API : créer des trajets</title>
  <link rel="stylesheet" href="css/style.css" />
  <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script src="js/script.js"></script>
 </head>
<?php 
try
{
$bdd = new PDO('mysql:host=localhost;dbname=data_marker', 'root', '');
}
catch (Exception $e)
{
die('Erreur : ' . $e->getMessage());
}
try{
  $sql = "SELECT lat,lng FROM markers";
  $sth = $bdd->prepare($sql) ;
  $sth->execute();
//On stocke le résultat en ARRAY
$result = $sth->fetchAll(PDO::FETCH_ASSOC);
} catch (Exception $e) {
  die('Erreur : ' . $e->getMessage());
}
//on convertit en JSON
$arr_Json = json_encode($result,JSON_NUMERIC_CHECK);
echo $arr_Json.'<br />';
 //json_encode(array('prenom' => 'bob'));
echo '<body onload="initialize()">
  <div id="map_canvas"></div>
 </body>';
 
?>
 
</html>


style.css:

html, body{
 height:100%;
 margin: 0;
 padding: 0;
}


#map_canvas{
 height:700px;
 width: 700px;
}


script.js:
function initialize(){
 var mapOptions={
  zoom: 6, // 0 à 21
  center: new google.maps.LatLng(47,2), // centre de la carte
  mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID, TERRAIN
 }
 var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
 var myLatLng = new google.maps.LatLng(43.52500,1.82694);
 var marker = new google.maps.Marker ({
  position: myLatLng,
  map: map,
  titre: "Auriac-sur-vendinelle"
 });

 var myLatLng2 = new google.maps.LatLng(43.6,2.25);
 var marker2 = new google.maps.Marker ({
  position: myLatLng2,
  map: map,
  titre: "Castres"
 });

 //trajet 1
 var directionsService = new google.maps.DirectionsService();
 var directionsDisplay = new google.maps.DirectionsRenderer({
  'map': map
 });

 var request = {
  origin: myLatLng,
  destination: myLatLng2,
  travelMode: google.maps.DirectionsTravelMode.DRIVING,
  unitSystem: google.maps.DirectionsUnitSystem.METRIC
 };

 directionsService.route(request, function(response, status){
  if(status == google.maps.DirectionsStatus.OK){
   directionsDisplay.setDirections(response);
   directionsDisplay.suppressMarkers = false;
   directionsDisplay.setOptions({
    polylineOptions: {strokeColor: '#008000'},
    preserveViewport: false
   });
  }
 });


 
}
0
Mon but et de remplacer le premier paramètre de chacune des deux instructions par les éléments de la première colonne de ma table et de remplacer aussi le deuxième paramètre de chacune des deux instructions par les éléments de la deuxième colonne de ma table?
var myLatLng = new google.maps.LatLng(43.52500,1.82694);
 var myLatLng2 = new google.maps.LatLng(43.6,2.25);
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344 > linda
24 mars 2016 à 00:49
Tu n'utilises pas du tout l'ajax dans l'exemple de code que tu nous donnes.......

M'enfin.. bref....
fais donc un console.log de la variable $arr_Json dans ton code javascript
comme ceci :
var arrJson = <?php echo $arr_Json ;?>
console.log(arrJson);


Puis regarde dans la CONSOLE de ton navigateur ce que ça t'affiche. (et colle nous le résultat ici....)
0
Rejoignez-nous