Problème avec une méthode

Par Abdelkarim Chabane, il y a 6 ans

Javascript

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je cherche à faire une carte interactive de location de vélo.
Je fait appel à l'API de JCDecaux pour récuperer des informations sur des stations (localisation, nombre de vélo dispo ..) puis
je vais avec l'api leaflet créé des markeur grâce aux informations de localisation des stations (longitude et latitude)
Les markeurs sont créé sous fomes d'objet, je vais alors leurs donné une methode nomé ici onmarkerclick qui va permettre lors du click sur l un d'entre eux d'afficher le infos sur la stations en question. (adresse, nombre de vélo dispo ..)

Tout marche bien excepté la méthode displayStationInfo qui n'est pas reconnut (même en enlevant le Bind)

Merci d'avance ..

class map { constructor() { this.map = L.map('map').setView([47.218371, -1.553621], 14); this.contractTable; this.marker; this.identifiant; this.infoStation; this.initialiseMap(); this.recoverContract(); } initialiseMap() { L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYWJrNzYiLCJhIjoiY2p2eTNwM3lnMGF3MDRhbXJibnBlcHM4dyJ9.OgQ90LtvCO9qbM5ctoKpSg', { attribution: '', maxZoom: 18, id: 'mapbox.streets', accessToken: 'pk.eyJ1IjoiYWJrNzYiLCJhIjoiY2p2eTNwM3lnMGF3MDRhbXJibnBlcHM4dyJ9.OgQ90LtvCO9qbM5ctoKpSg' }).addTo(this.map); } // Get contract table recoverContract() { ajaxGet("https://api.jcdecaux.com/vls/v1/stations?contract=nantes&apiKey=28b0fb05678c8dbbccf28ee6cd3b1771fc560c43", this.display.bind(this)); } display(answer) { // transform json in object this.contractTable = JSON.parse(answer); this.contractTable.forEach((contrat) => { // Add new marker this.marker = new L.marker([contrat.position.lat, contrat.position.lng], {myId: contrat.number}); this.marker.bindPopup(`Station ${contrat.number}`); // add the function for the marker this.marker.on('click', this.onMarkerClick); // add marker on the map this.marker.addTo(this.map); }); } // function for recover the station info displayStationInfo(answer) { const infoStation = JSON.parse(answer); $("#address").text(`adresse : ${infoStation.address}`); $("#place").text(` ${infoStation.totalStands.availabilities.stands} places`); $("#bike").text(` ${infoStation.totalStands.availabilities.bikes} Vélos`); } // function click on marker onMarkerClick() { ajaxGet(`https://api.jcdecaux.com/vls/v3/stations/${this.options.myId}?contract=nantes&apiKey=28b0fb05678c8dbbccf28ee6cd3b1771fc560c43`, this.displayStationInfo.bind(this)); } }```

6 réponses

Pandazaur, il y a 6 ans

Bonjour,

Tu peux nous en dire plus ?
Comment tu appelles ta fonction .display() ? As-tu instancié ton objet avant ?

Tu peux également afficher ton erreur JS ?

Abdelkarim Chabane, il y a 6 ans

Display est appeller dans la methode recovercontract avec ajax qui elle même est appeller quand j'instancie mon objet
voici le message d'erreur :
ajax.js:10 Uncaught TypeError: callback is not a function
at XMLHttpRequest.<anonymous> (ajax.js:10)

et voici ma fonction ajax :

// Exécute un appel AJAX GET
// Prend en paramètres l'URL cible et la fonction callback appelée en cas de succès

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

                 merci de ton aide
Pandazaur, il y a 6 ans

Et comment appelles-tu ta fonction ajaxGet ?

Ca il semblerait que tu ne fasses pas passer de function en second argument. L'appelles tu comme ça ?

ajaxGet('http://to-url.com', function() { // Code exécuté ici une fois ton appel ajax terminé avec succès })
Abdelkarim Chabane, il y a 6 ans

Oui, je l'appel comme cela dans la methode recoverContract

Pandazaur, il y a 6 ans

Tu peux changer ta fonction recoverContract?

// Get contract table recoverContract() { ajaxGet( "https://api.jcdecaux.com/vls/v1/stations?contract=nantes&apiKey=28b0fb05678c8dbbccf28ee6cd3b1771fc560c43", (answer) => this.display(answer) ); }
Abdelkarim Chabane, il y a 6 ans

cette appel fonctionne, les différents marqueurs s'affiche sur la carte sans soucis, le problème vien de de onmarkerclick qui lorsque j'effectue mon appel ajax me dit que que callback (dans ce cas la qui est la méthode onmarkerclick) n'est pas une fonction ...