Ajax Orienté Objet response : null

Bonsoir tout le monde je suis actuellement le parcours de développeur web junior, j'ai validé mes 2 premiers projets.

Arrivé au projet 3 je dois concevoir une carte interactive de location de vélos avec comme contrainte technique que le Js soit orienté objet.

Pour récupérer les informations des stations de vélos que je vais intégrer sur ma carte j'utilise l'API de Jcdecaux, je n'arrive pas à les récupérer j'ai une réponse null.

Je sollicite donc votre aide. :D

Voici mon objet Ajax :

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

let objetAjax = { url: null, methode: 'GET', request: function(callback) { if (this.url == null) { console.error('L\'url n\'est pas défini') return; }   let request = new XMLHttpRequest(); request.open(this.methode, this.url); request.addEventListener('error', function() { console.error('Erreur réseau'); });   request.addEventListener('load', function () { if (request.status >= 200 && request.status <= 400) { if (callback) request.responseText; } else console.error(request.status + ' ' + request.statusText); }); request.send(null); } };

---

Ainsi que mon fichier JcdecauxObjet

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

let JCDecauxApi = {   key: null, contract: null, ajax: Object.create( objetAjax ), response: null,   request: function() {   if( this.key == null ) {   console.error( 'JCDecaux API : la clé n\'est pas bonne ou non défini ' ); return; }   if( this.contract == null ) {   console.error( 'JCDecaux contract n\'est pas défini.' ); return; }   this.ajax.url = 'https://api.jcdecaux.com/vls/v1/stations?contract=' + this.contract + '&apiKey=' + this.key;   this.ajax.request( this.setResponse ); },   setResponse: function( response ) {   this.response = JSON.parse( response ); console.log(this.response); // ici ça fonctionne   }   };   decauxApi = Object.create( JCDecauxApi ); decauxApi.key = '6a44c41c86a1dxxxxxxxxxxxxx'; decauxApi.contract = 'lyon'; decauxApi.request();       console.log( decauxApi.response );

---

Bonjour et bienvenue sur DVP.

Les requêtes via Ajax sont asynchrones, le résultat n'est pas disponible immédiatement, donc au moment de ton appel à console.log( decauxApi.response ) la réponse n'est pas encore disponible.

Une deuxième chose, quand tu écris

Code:

---

1 2 3 4 5 6 7

request.addEventListener('load', function() { if (request.status >= 200 && request.status <= 400) { if (callback) request.responseText; } else console.error(request.status + ' ' + request.statusText); });

---

il te faut invoquer ta fonction callback sinon rien ne va se passer

Code:

---

1 2 3 4 5 6 7 8

request.addEventListener('load', function() { if (request.status >= 200 && request.status <= 400) { if (callback) // request.responseText; callback(request.responseText); } else console.error(request.status + ' ' + request.statusText); });

---

Tout d'abord merci pour la réponse, maintenant si je fais appel à la variable "response" à l'exterieur de l'objet, celle ci n'a pas été modifiée et reste nulle.

Par contre si je fais un console.log(this.response) dans ma fonction setResponse, ça fonctionne bien maintenant grâce au callback que je viens de rajouter grâce à votre aide.
J'ai essayé de chercher de mon côté une solution, j'ai vu que je dois modifier mon objet JCDecauxApi et fournir un paramètre callback de request, et ensuite seulement de traiter mon résultat.
J'avoue que je sais pas trop comment m'y prendre.

J'ai trouvé la solution j'ai mis en paramètre mon callback à request,ça marche mais j'ai un undefined sur le console.log :

Code:

---

console.log( decauxApi.request(function(response) { console.log("response is", response) }));

---

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

let JCDecauxApi = {   key: null, contract: null, ajax: Object.create( objetAjax ), response: null,   request: function(successCallback) {   if( this.key == null ) {   console.error( 'JCDecaux API : la clé n\'est pas bonne ou non défini ' ); return; }   if( this.contract == null ) {   console.error( 'JCDecaux contract n\'est pas défini.' ); return; }   this.ajax.url = 'https://api.jcdecaux.com/vls/v1/stations?contract=' + this.contract + '&apiKey=' + this.key;   this.ajax.request(successCallback); },   setResponse: function( response ) {   this.response = JSON.parse( response ); console.log(this.response); // ici ça fonctionne   }   };       decauxApi = Object.create( JCDecauxApi ); decauxApi.key = '6a44c41c86a1d2eb54xxxxxxxxxxxx'; decauxApi.contract = 'lyon'; decauxApi.request();       console.log( decauxApi.request(function(response) { console.log("response is", response) }));

---

Citation:

---

mais j'ai un undefined sur le console.log

---

c'est tout à fait logique dans la chronologie des actions.

• Le premier console t'affiche le retour de ta fonction decauxApi.request et comme celle-ci ne retourne rien c'est par défaut undefined.

• Le deuxième est le retour de ta fonction « callback anonyme » donc ta réponse attendue.

Ajoute un return à ta fonction request

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

request: function(successCallback) { if (this.key == null) { console.error('JCDecaux API : la clé n\'est pas bonne ou non défini '); return; } if (this.contract == null) { console.error('JCDecaux contract n\'est pas défini.'); return; } this.ajax.url = 'https://api.jcdecaux.com/vls/v1/stations?contract=' + this.contract + '&apiKey=' + this.key; this.ajax.request(successCallback); return "Requête envoyée"; },

---

et relance ton code

Code:

---

1 2 3

console.log("Envoi requête :", decauxApi.request(function(response) { console.log("Réception réponse :", response) }));

---

peut être verras tu mieux ce qu'il en est.

Je comprends mieux, je ne savais pas que cela pouvait générer un undefined sans mettre le return un grand merci pour votre aide tout fonctionne :)