Problème avec une méthode

Abdelkarim Chabane
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

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
Auteur

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

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
Auteur

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

Pandazaur

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
Auteur

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 ...