Discussion :

[pikamo]

Bonjour,
je cherche à récupère les données envoyé de JS sous forme JSON dans ma page html.
la page 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
 
var selectQuery = 'SELECT longitude , latitude FROM markers';
io.sockets.on('connection', function (socket) {
mySqlClient.query(selectQuery, function(err, dbRes, fields) {
            if (err) throw err;
            else {
                v2=JSON.stringify( dbRes );
                setInterval(function(){
                    socket.emit('date',{'date': v2});
                }, 1000);
            }
 
        });
 
});

la page html:

Code :

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

1
2
3
4
5
6
7
8
9
 
var socket = io.connect();
 
    socket.on('date', function(data)
    {
      //recupére JSON
        $('#date').text(data.date);
     //je doit changer la récupération et utiliser deux variables une pour les longitudes et l'autre pour les latitudes de chaque devices
    });

[SpaceFrog]

Vu qu'il me semble que tu utilises jquery, pourquoi ne pas utiliser getJSON ???

http://api.jquery.com/jquery.getjson/

[SylvainPV]

Et pourquoi la page HTML est-elle du code JavaScript ? La question ne serait-elle pas plutôt comment passer des données d'un script à un autre ? Auquel cas l'utilisation de socketIO me paraît un peu précipitée...

[pikamo]

bonjour,
pour getJSON ...j'ai essayé mais je sais pas comment l'utilisé.
les données reçu par la page html est

Code :

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

[{"longitude" : 12.489996 , "latitude" : 89.25666664}]

j'ai seulement un seul ligne dans ma base de données.
je veux récupère les valeurs dans deux variable pour les marquer dans la MAP

[pikamo]

Pour le moment , j'ai marqué dans la map une seul point (c é a dire si j'ai dans ma base de données une seul point)

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
//code sol.js

var selectQuery = 'SELECT longitude , latitude FROM markers where iddevice = 1';//pour avoir un seul ligne
io.sockets.on('connection', function (socket) {
mySqlClient.query(selectQuery, function(err, dbRes, fields) {
            if (err) throw err;
            else {
                 v2=JSON.stringify( dbRes );
                 console.log(v2);
                setInterval(function(){
                    socket.emit('date',{'date': v2});
                }, 1000);
            }

        });

});

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
 
page html
</script>
 socket.on('date', function(data)
    {
       //nombre d'Obj pour le moment un seul Objet 
        var nobj = JSON.parse(data.date).length;
        console.log(nobj);
        //Pour chaque Obj
          var obj = data.date.replace("[","").replace("]","");// Pour avoir {"longitude" : 12.489996 , "latitude" : 89.25666664}
          var json = JSON.parse(obj);
           marker = new google.maps.Marker({
                position: new google.maps.LatLng(json["longitude"], json["latitude"]),
                map: map
            });
        }
  });
</script>
<div id="map-canvas"></div>

Le probléme si j'ai autres points à marquer aussi ?!!! (je pense une boucle! mais comment j'ai récupère chaque objet seul !!)

[Mogwaii]

Avec getJSON tu peux tester quelque chose comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
$.getJSON( tonUrl, function( data ) {
    var markers = [];
    $.each( data, function( key, value ) {
         marker = new google.maps.Marker({
                position: new google.maps.LatLng(value.longitude, value.latitude),
                map: map
            });
        markers.push(marker); // Même si l'a tu dois pouvoir ajouter le marker directement à gmap.
    });

Ici tu parcours donc la liste de résultat donc pas de soucis si il y a plusieurs lignes.

C'est un petit exemple qui peut t'aiguiller sur la façon d'utiliser getJSON, je ne l'ai pas testé donc je sais pas si il est fonctionnelle, mais c'est pour que tu vois que c'est surement faisable et plus simple à gérer avec cette méthode.

[pikamo]

J'ai développé ce code pour atteindre mon objectif.Mais je sais pas si ce code est compatible en terme de professionnel !!! Merci de me donner votre avis

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
socket.on('date', function(data)
    {
      //recupére JSON
        $('#date').text(data.date);
        var nobj = JSON.parse(data.date).length;
        console.log(nobj);
        var d = data.date.replace("},{","}|{").replace("[","").replace("]","");
        //console.log("trame"+d);
        var d2 = d.split("|");
 
        for (i = 0; i < nobj; i++) { // tous les lignes de ma base de données 
            //console.log("champs"+i+d2[i]);
            var json = JSON.parse(d2[i]);
 
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(json["longitude"], json["latitude"]),
                map: map
            });
        }
    });