Créer une variable pour ajaxGet pour API

Version imprimable

bonjour à tous,

je voudrais créer une variable pour ce code mais débutante, je galère j'ai une soutenance lundi et mes essais n'affiche plus les stations. Pouvez vous m'aider ?? merci d'avance.

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
 ajaxGet("https://api.jcdecaux.com/vls/v1/stations?contract=lyon&apiKey=62f............................c642c0987e254d5af", function(reponse){
        var velov = JSON.parse(reponse);
	   	//manipulation du tableau
        var markers = new Array();
 
        //boucle pour initialiser chaque marqueur de la station
        for(var i=0;i<velov.length;i++)
        {
          var staVel = velov[i];
          var posX = staVel.position.lat;
          var posY = staVel.position.lng;         
          var myLatlng = new google.maps.LatLng(posX,posY);
 
          //gestion marker et de ses proprietes
          var marker = new google.maps.Marker(
          {
            position: myLatlng,
            title:staVel.name,
            address:staVel.address,
            totalSpots:staVel.bike_stands,
            freeSpots:staVel.available_bike_stands,
            freeBikes:staVel.available_bikes,
            status:staVel.status,
            icon:markerIcon(staVel.status)
          });
 
		  //ajoute marker à la fin du tableau
          markers.push(marker);
 
          //Creation d'evenement pour la reservation
          marker.addListener("click", function(){
            reservation.init(this.title,this.address,this.totalSpots,this.freeBikes,this.status);
            domMaster.infoResa();
          });
 
          	//ajoute un nouvel élément A Map.
			marker.setMap(map);
        }
 
         var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

31/08/2018, 10h40
Watilin

Bonjour,
as-tu un message d’erreur dans la console F12 ?
31/08/2018, 11h04
web.bacor

Citation:

Envoyé par Watilin

Bonjour,
as-tu un message d’erreur dans la console F12 ?

bonjour,

Non, j'ai pas d'erreur tout fonctionne mais mon projet a été invalidé.
je dois mettre Ajaxget dans une variable
31/08/2018, 11h37
Watilin

Mais d’où vient cette fonction ajaxGet ? C’est toi qui l’as écrite ?
Et ça veut dire quoi « mon projet a été invalidé » ? Invalidé par des gens ? Par un outil de vérification ?

Citation:

Envoyé par Watilin

Mais d’où vient cette fonction ajaxGet ? C’est toi qui l’as écrite ?
Et ça veut dire quoi « mon projet a été invalidé » ? Invalidé par des gens ? Par un outil de vérification ?

le projet n'a pas été validé lors de ma soutenance (openclass)

c'est un fichier ajax.js pour lancer l'API DECAUX (station de velib)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function ajaxGet(url, callback){ var req = new XMLHttpRequest(); req.open("GET", url); req.addEventListener("load", function () { if (req.status >= 200 && req.status < 400) { // Appelle la fonction callback en lui passant la rÃ©ponse de la requÃªte callback(req.responseText); } else { console.error(req.status + " " + req.statusText + " " + url); } }); req.addEventListener("error", function () { console.error("Erreur rÃ©seau avec l'URL " + url); }); req.send(null); }

31/08/2018, 16h09
Watilin

C’est la formation Développeur web junior ? (juste par curiosité)

Je ne comprends pas bien ce que tu veux dire par « mettre Ajaxget dans une variable » car ajaxGet est déjà une variable. En effet, en JavaScript, les fonctions sont des variables (ou bien des propriétés d’objet, mais ce n’est pas le cas ici).

Donc je vais te demander de préciser ta question ;)

Oui c'est le DWJ. (projet non validé, à retravailler)

Lors le ma soutenance, il m'a fait la remarquer que AjaxGet n'était pas dans un objet et qu'il fallait y remédier pour la prochaine soutenance . voila le code de mon fichier reservelo.js et AjaxGet en map ..... ne sont pas dans des objets

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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
//=================================================================
//On accède aux elements contenus dans les Id avec la méthode getElementById() 
//=================================================================
var infoElm = document.getElementById("divInfo");
var infoElm = document.getElementById("divInfo");
var cartoucheInfoElm = document.getElementById("cartoucheInfo");
var mapElm = document.getElementById('map');
var maskElm = document.getElementById("divMask");
var canvDivElm = document.getElementById("divCanv");
var signElm = document.getElementById("signature");
var resaElm = document.getElementById("pResa");
var alertElm = document.getElementById("divAlert");
 
//==================================================================
//CREATION VARIABLE globale POPUPMASTER pour la gestion des fenetres, erreurs, validation
//==================================================================
 
 
var popupMaster = {
 
  //MONTRER - Position et style appliquées
  show: function(){
    maskElm.style.zIndex = "104";
    alertElm.style.display="initial";
    maskElm.style.display = "initial";
    },
 
    //CACHER- Position et style appliquées selon conditions
  hide: function(){
    if(canvDivElm.style.display=="initial")
    {
      alertElm.style.display = "none";
      maskElm.style.zIndex = "99";
    }  
    else
    {
      maskElm.style.zIndex = "99";
      alertElm.style.display = "none";
      maskElm.style.display = "none";
    }
    },
 
  //MONTRER LE CANVAS - Position et style appliquées
    showCanv: function(){
    redraw();
    maskElm.style.display = "initial";
    canvDivElm.style.display = "initial";
    },
 
  //CACHER LE CANVAS - Position et style appliquées
    hideCanv:function(){
    maskElm.style.display = "none";
    canvDivElm.style.display = "none";
    clear();
  },
 
  //STATION FERMEE - Position et style appliquées au texte
  erreur: function(text)
    {
    alertElm.style.backgroundColor = "#E00000";
    this.show();
    alertElm.innerHTML = text;
      //gestionnaire d'évènements pour click
    alertElm.addEventListener("click",this.hide);
    },
 
  //STATION OUVERTE- Position et style appliquées au texte
    validation: function(text){
 
    alertElm.style.backgroundColor = "#32C400";
    this.show();
    alertElm.innerHTML = text;
    this.show();
    setTimeout(this.hide, 3000);
 
 
  }
 
}
 
//==================================================================
//CREATION VARIABLE RESERVATION 
//==================================================================
 
var reservation = {
 
  //Iititalisation coordonnées de la station
    init: function(name,address,spot,bikLft,open){
    this.open= open;
    this.name = name;
    this.address = address;
    this.spot = spot;
    this.bikesLeft=bikLft;
    domMaster.infoResa();
  },
 
  //récupération les infos stockées dans l'api storage
  activation: function(){
    sessionStorage.active = true;
    sessionStorage.name = this.name;
    sessionStorage.address = this.address;
    sessionStorage.setItem("imgCanvas",canvas.toDataURL());
  },
 
  refresh: function(){
    //Recharge les infos du sessionStorage si besoin
    if(sessionStorage.active=="true")
    {
      timer.minutes=sessionStorage.minutes;
      timer.secondes=sessionStorage.secondes;
      domMaster.loadResa();
      domMaster.loadCanv();
    }
    else
    {
      domMaster.noResa();
    }
  }
}
 
//==================================================================
//CREATION VARIABLE DOMMASTER - contenu visuel appartenant au DOM
//==================================================================
 
var domMaster = {
 
  //creation elements de la station
  infoResa: function(){
    cartoucheInfoElm.innerHTML = "";
    infoElm.style.padding = "15px";
    infoElm.style.flex = 1;
    mapElm.style.borderRadius = " 0px 0 0 0px";
    var h2InfoResa = document.createElement("h2");
    var pInfoResa = document.createElement("p");
    var btnResa = document.createElement("BUTTON");
 
    //gestionnaire d'evenement bouton validation de réservation selon station ouverte ou fermee
    btnResa.addEventListener("click", function(){
      if(reservation.open!="OPEN")
      {
        popupMaster.erreur("Station FERMEE <br/> Vide ou en travaux ! <br/>Veuillez choisir une autre station.");
      }
        else if(reservation.bikesLeft==0)
        {
      popupMaster.erreur("Actuellement , Il n'y a plus de vélos disponibles à cette station ! Veuillez choisir une autre station.");
    }
    else
          {
        popupMaster.showCanv();
      }
    });
 
    //modifie le texte si station ouverte ou fermée
    if(reservation.open=="OPEN")
    {
      h2InfoResa.innerHTML="Station OUVERTE";
      h2InfoResa.className ="open";
    }
    else
    {
      h2InfoResa.innerHTML="Station FERMEE !<br/>Sans velib disponible ou en travaux";
      h2InfoResa.className ="close";
    }
 
    pInfoResa.innerHTML = reservation.name + " <br><br>" + reservation.address + "<br><br>" + reservation.spot + " places<br>" + reservation.bikesLeft + " vélo(s) disponible(s)";
    btnResa.innerHTML = "RESERVATION";
    cartoucheInfoElm.appendChild(h2InfoResa);
    cartoucheInfoElm.appendChild(pInfoResa);
    cartoucheInfoElm.appendChild(btnResa);
    infoElm.appendChild(cartoucheInfoElm);
  },
 
  //cache le contenu si station fermee
  hideInfo: function(){
    infoElm.innerHTML="";
    infoElm.style.flex=0;
    infoElm.style.padding=0;
    setTimeout(function(){ mapElm.style.borderRadius = "15px"; }, 500);
  },
 
  //montre le canvas
    loadCanv: function(){
    var img = document.createElement("IMG");
    var getImg = sessionStorage.getItem("imgCanvas");
    img.src = getImg;
    img.width = "300";
    signElm.innerHTML="";
    signElm.appendChild(img);
    },
 
  //montre validation de la reservation
    loadResa: function(){
    resaElm.innerHTML = sessionStorage.name + "<br>La reservation de votre vélo est validée<br>Elle expirera dans : " + timer.minutes + "mn et " + timer.secondes + "s";
  },
 
  //pas de reservation
  noResa: function(){
    signElm.innerHTML ="";
    resaElm.innerHTML = "Pas de réservation";
    }
}
 
//==================================================================
//CREATION VARIABLE TIMER - gestion du temps
//==================================================================
 
var timer = {
 
    //delai selon conditions
  moins: function(){
    domMaster.loadResa();
    if(this.secondes<=0 && this.minutes<=0)
    {
      domMaster.noResa();
      popupMaster.erreur("Votre réservation a expirée !");
      sessionStorage.active=false;
    }
  else if(this.secondes==0)
    {
      this.secondes=59;
      this.minutes--;
    }
    else
    this.secondes--;
  },
 
  //chargement compteur
  store: function(){
    sessionStorage.minutes=this.minutes;
    sessionStorage.secondes=this.secondes;
  }
}
 
///==================================================================
//CREATION VARIABLE TIMERCONTROL - controle du compte a rebours
//==================================================================/OBJET 
 
var timerControl = {
 
    ////Iititalisation compteur 20 minutes
  init: function(){
    timer.minutes=20;
    timer.secondes=0;
  },
 
  //controle compteur selon station ouverte ou fermée
    tick: function(){
    if(sessionStorage.active=="true")
    {
      timer.moins();
      timer.store();
    }
    else
    {
    domMaster.noResa();
    }
    }
}
 
 
reservation.refresh();
 
//gestion du delai d execution
setInterval(timerControl.tick, 1000);
 
//ajout d'un gestionnaire d'element touche  
document.addEventListener("keydown", function(e){
   if(e.keyCode==32)
    {
      timer.minutes=0;
      timer.secondes=3;
    }
})
 
//==================================================================
// MAP
//===================================================================
 
var map;
 
function initMap(){
  var mapOptions = {
    center: new google.maps.LatLng(45.7570, 4.8570),
    disableDefaultUI: true,
    zoom: 13
  };
  map = new google.maps.Map(mapElm,mapOptions);
}
 
  function markerIcon(isOpen){
    if(isOpen=="OPEN")
    {
      return "http://maps.google.com/mapfiles/ms/micons/green-dot.png";
    }
    else if(isOpen!=="OPEN")
    {
      return "http://maps.google.com/mapfiles/ms/micons/red-dot.png";
    }
  }
 
//===================================================================================
//etat de chaque station fourni via l'API de JCDecaux. Donnees de l'API entemps reel. format JSON   
//======================================================================================
 
 
 //Transfert de donnees de JCDECAUX 
 
  ajaxGet("https://api.jcdecaux.com/vls/v1/stations?contract=lyon&apiKey=62f71e1754a2c1f17d690b0c642c0987e254d5af", function(reponse){
        var velov = JSON.parse(reponse);
      //manipulation du tableau
        var markers = new Array();
 
        //boucle pour initialiser chaque marqueur de la station
        for(var i=0;i<velov.length;i++)
        {
          var staVel = velov[i];
          var posX = staVel.position.lat;
          var posY = staVel.position.lng;         
          var myLatlng = new google.maps.LatLng(posX,posY);
 
          //gestion marker et de ses proprietes
          var marker = new google.maps.Marker(
          {
            position: myLatlng,
            title:staVel.name,
            address:staVel.address,
            totalSpots:staVel.bike_stands,
            freeSpots:staVel.available_bike_stands,
            freeBikes:staVel.available_bikes,
            status:staVel.status,
            icon:markerIcon(staVel.status)
          });
 
      //ajoute marker à la fin du tableau
          markers.push(marker);
 
          //Creation d'evenement pour la reservation
          marker.addListener("click", function(){
            reservation.init(this.title,this.address,this.totalSpots,this.freeBikes,this.status);
            domMaster.infoResa();
          });
 
            //ajoute un nouvel élément A Map.
      marker.setMap(map);
        }
 
         var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
 
 
//===================================================================================
// STATION FERMEE - VIDE OU EN TRAVAUX
//=============================================================================
 
    //creation d'une station fermee
          var staVel = {
            name:"STATION EN TRAVAUX",
            address:"Rue de Paris",
            available_bikes:15,
            status:"TRAVAUX"
          }
          var posX = 45.728566;
          var posY = 4.942278;         
          var myLatlng = new google.maps.LatLng(posX,posY);
 
          //marqueur pour station fermee (fausse)
          var marker = new google.maps.Marker(
          {
            position: myLatlng,
            title:staVel.name,
            address:staVel.address,
            freeSpots:10,
            freeBikes:staVel.available_bikes,
            status:staVel.status,
            icon:markerIcon(staVel.status)
          });
 
 
//======================================
//======================================
 
        //ajoute marker à la fin du tableau
          markers.push(marker);
 
          //Creation d'evenement pour la reservation
          marker.addListener("click", function(){
          reservation.init(this.title,this.address,this.freeSpots,this.freeBikes,this.status);
          domMaster.infoResa();
          });
          marker.setMap(map);
          })

01/09/2018, 00h00
psychadelic

je comprends pas trop, en fait, il voudrait que ton ajaxGet soit dans une closure ?

https://developer.mozilla.org/fr/doc...cript/Closures

sinon, a part utiliser les promesses je vois pas trop comment transformer ton ajaxGet en objet...
01/09/2018, 17h40
psychadelic

IL y a un autre truc qui me chiffonne dans ta function ajaxGet(url, callback){...tu utilise un req.addEventListener("load", ... alors qu'un simple req.onreadystatechange suffit, et permet aussi de gérer une erreur de chargement....

et aussi pourquoi passer par un GET, alors que le POST est, à mon sens, une solution plus "propre" ??
01/09/2018, 21h28
Watilin
Citation:

Envoyé par psychadelic

je comprends pas trop, en fait, il voudrait que ton ajaxGet soit dans une closure ?
[…] a part utiliser les promesses je vois pas trop comment transformer ton ajaxGet en objet...

Je pense qu’il veut simplement que la fonction ajaxGet soit une propriété d’un des objets globaux popupMaster, reservation, domMaster, etc., qui font office « d’espace de noms » pour éviter que la portée globale soit trop encombrée.

@web.bacor, il faut simplement que tu déclares ta fonction comme propriété d’un des objets ou, au besoin, de créer un nouvel objet. Par exemple :
Code:

1 2 3 4 5 var exampleObject = { ajaxGet: function (url, callback) { ... } };
Après quoi tu appelles ta fonction comme ceci :
Code:

1 2 3 exampleObject.ajaxGet("https://api.jcdecaux.com/vls/v1/stations?... ", function (reponse) { ... });
Citation:

Envoyé par psychadelic

tu utilise un req.addEventListener("load", ... alors qu'un simple req.onreadystatechange suffit, et permet aussi de gérer une erreur de chargement....

Une itération de la spec XMLHttpRequest, parfois appelée XMLHttpRequest niveau 2, a introduit les évènements load et error, entre autres. Avec eux, plus besoin de tester readyState car il est forcément égal à 4. En revanche, le code de réponse du serveur doit toujours être vérifié (une erreur du serveur n’est pas une erreur du client).
On peut aussi écrire :
Code:

1 2 3 4 5 6 7 req.onload = function () { ... }; req.onerror = function () { ... };
Citation:

Envoyé par psychadelic

et aussi pourquoi passer par un GET, alors que le POST est, à mon sens, une solution plus "propre" ??

Pour la sémantique ? L’API Decaux a l’air d’être une API REST, ça me paraît cohérent que la méthode GET serve à faire une requête de données sans modification du serveur.

bonjour à tous,

Merci encore de votre aide,
j'ai créer un fichier ajax.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var objetajax = {
        function ajaxGet(url, callback){
        var req = new XMLHttpRequest();
            req.open("GET", url);
            req.addEventListener("load", function () {
                if (req.status >= 200 && req.status < 400) {
                    // Appelle la fonction callback en lui passant la rÃ©ponse de la requÃªte
                    callback(req.responseText);
                } else {
                    console.error(req.status + " " + req.statusText + " " + url);
                }
            });
            req.addEventListener("error", function () {
                console.error("Erreur rÃ©seau avec l'URL " + url);
            });
            req.send(null);
        }
}

et un autre fichier stations. js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/===================================================================================
//etat de chaque station fourni via l'API de JCDecaux. Donnees de l'API entemps reel. format JSON   
//======================================================================================
 
  //Transfert de donnees de JCDECAUX 
 
 
  objetajax.ajaxGet("https://api.jcdecaux.com/vls/v1/stations?contract=lyon&apiKey=62f71e1754a2c1f17d690b0c642c0987e254d5af", function(reponse){
        var velov = JSON.parse(reponse);
      //manipulation du tableau
        var markers = new Array();
 
        //boucle pour initialiser chaque marqueur de la station
        for(var i=0;i<velov.length;i++)
        {
          var staVel = velov[i];
          var posX = staVel.position.lat;
          var posY = staVel.position.lng;         
          var myLatlng = new google.maps.LatLng(posX,posY);
 
          //gestion marker et de ses proprietes
          var marker = new google.maps.Marker(........
          {

j'espère que ça lui conviendra

j'apprends mieux avec vous qu'en formation en ligne (en formation sur 6 mois, je ne pense pas devenir un developpeur web junior averti même en suivant leurs cours, mais au moins j'apprends des choses dans ce forum. ).
Excellent dimanche à tous

03/09/2018, 11h09
Watilin

Citation:

Envoyé par web.bacor

j'apprends mieux avec vous qu'en formation en ligne

Voilà qui fait plaisir à lire :D