Récupération JSON dans une page HTML

Version imprimable

Bonjour,
je cherche à récupère les données envoyé de JS sous forme JSON dans ma page html.
la page JS:

Code:

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:

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
    });

09/09/2014, 16h47
SpaceFrog

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

http://api.jquery.com/jquery.getjson/
09/09/2014, 18h13
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...
10/09/2014, 10h37
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:

[{"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

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:

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:

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

Avec getJSON tu peux tester quelque chose comme ça :
Code:

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.

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:

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
            });
        }
    });