Discussion :

[Lunesti]

Bonjour,

Nouveau sur ce site, je me suis enfin décidé à venir poster mes travaux afin de demander de l'aide. Mon projet est de récupérer des données via JCDecaux. Rien de bien compliqué jusque là.

Je créé une class Map dans laquelle j'insère une map, un contrat qui correspond à la ville (ici Amiens) + ajout de markers qui ont leur propre coordonnées via la boucle for.
J'ai directement parsé le JSON que j'ai inséré dans this.stations = [...]. Toute mes données sont dans ce tableau.



Tout fonctionne jusque ici.
Mais le problème avec cette méthode c'est que je suis dépendant de la class Map. Je ne peux pas récupérer mes données ailleurs que dans cette class.
Exemple pour la class Reservation, je souhaite stocker les données de reservation dans le sessionStorage:





J'avais au préalable "tout" écrit dans la méthode addMarkers() de la class Map, cela fonctionnait bien, mais je me suis rendu compte que plus j'avançais, plus je devenais dépendant de cette méthode. C'est à dire que je devais tout écrire dans cette même méthode, sans pouvoir séparer les choses.

Donc ma question est comment, à partir d'une autre class, récupérer les données du tableau JCDecaux . Je pense qu'il y a un autre moyen car ma méthode paraît fonctionnel mais limitative...


Je vous remercie par avance de votre aide.

[NoSmoking]

Bonjour et bienvenue sur DVP.

Qu'est qui t'empêche de faire appel à une fonction/méthode d'une classe extérieure à partir d'une classe.
Par exemple, tes markers étant stockés dans ta class Map, au clic sur le marker tu affiches les données relatives à celui-ci dans une « fenêtre » contenant un bouton validé qui cliqué lancera l'enregistrement des données.

[Lunesti]

Salut à toi et merci d'avoir pris le temps de me lire et de répondre.

Je pense avoir compris ce que tu me dis et c'est exactement ce que j'avais fait.







Comme tu peux le voir dans cette image, lorsque je clique sur un marqueur au hasard les infos de ce marqueur apparaissent à droite, dans la fenêtre


une fois les champs rempli, lorsque je clique sur réserver une fenêtre modal apparaît pour d'abord signer puis ensuite valider la réservation.





ceci est juste une étape supplémentaire avant de pouvoir stocker les données. Donc lorsque je clique ensuite sur Valider, c'est à ce moment la que les données s'enregistre dans le sessionStorage.


Mais d'un point de vue code, ce n'est pas ce que l'on me demande, car une seule et même fonction fait beaucoup trop de choses (ajout de marker, click, stocker les données, etc)






On me demande de faire des class séparés. Donc je dois avoir une class Reservation qui contient la fonction/méthode : "lorsque je clique sur valider, j'enregistre les données dans le sessionStorage". Mais à partir d'une nouvelle class, je n'ai plus accès à mon tableau stations (this.stations) qui me permet d'écrire par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
sessionStorage.setItem('Etat de la station : ', this.stations[i].status);
sessionStorage.setItem('Adresse : ', this.stations[i].address);

Via une boucle for. Du coup this.stations[i] n'est pas reconnu et c'est logique. Du coup je ne sais pas comment enregistrer les données de cette façon....


Voila, j'espère avoir été clair , merci encore de m'aider.

[NoSmoking]

Tout d'abord quelques rappels :

• ll est inutile de citer une réponse pour y répondre, il existe un bouton répondre à la discussion.
• Il est préférable de mettre le code, entre des balises [CODE][/CODE] plutôt que des images de celui-ci, cela favorise les tests et évite les recopies.
• Aide sur l'utilisation des boutons.

Ceci étant, tu peux créer une class Reservation et appeler une de ses méthodes sur le clic du marqueur.

Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
class Reservation {
  constructor(idElem) {
    this.conteneur = document.getElementById(idElem);
    this.infos = {};
  }
  afficheDatas(datas) {
    console.log( datas);   
  }
  storeDatas() {
  }
  clearDatas() {}
}

et création comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

const resa = new Reservation("info-station");

où "info-station" est un élément du DOM dans lequel tu vas inscrire les donnée au clic sur le marqueur.

Dans ta class Map et dans ta fonction addMarkers

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
addMarkers(datas) {
  datas.forEach((data) => {
    L.marker(Object.values(data.position), {
        "data": data                              // on garde ici les données intéressantes
      })
      .addTo(this.myMap)
      .on("click", function () {
        resa.afficheDatas(this.options.data);     // appel à la méthode Reservation.afficheData
      });
  });
}

C'est à aménager suivant ton code.

Concernant l’affichage des données, je te donne une astuce simplifiant le code.

Création d'un élément, comme pressentie dans la class Reservation, qui pourrait ressembler à cela

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="info-station">  
  <p>Nom<span id="name"></span></p>
  <p>Adresse<span id="address"></span></p>
  <p>Place.s disponible.s<span id="bike_stands"></span></p>
  <p>Nbr<span id="available_bike_stands"></span></p>
  <p>Vélo.s disponible.s<span id="available_bikes"></span></p>
  <p>Etat<span id="status"></span></p>
</div>

tu noteras que les id correspondent aux champs à traiter de la sorte la méthode d'affichage devient triviale :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
afficheDatas(datas) {
  const elements = this.conteneur.querySelectorAll("[id]");
  for (let elem of elements) {
    const prop = elem.id;
    if (datas[prop]) {
      this.infos[prop] = datas[prop];
      elem.textContent = datas[prop];
    }
  };
  this.storeDatas();
}

on en profite pour stoker les données dans this.infos pour facilité la gestion ultérieure.

Avec cela la méthode storeDatas() devient également des plus simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
storeDatas(){
  sessionStorage.setItem("infos", JSON.stringify(this.infos));
}

voilà qui je pense te permettra d'avancer dans ton projet, ceci n'étant qu'une façon de procéder.

[Lunesti]

Merci beaucoup, ton code a fonctionné. J'ai bien 2 class distinctes et l'enregistrement des données dans le sessionStorage fonctionne.

J'ai juste renommé le forEach pour l'adapter à mon code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  this.stations.forEach((data) => {...}

Je vais étudier ce que tu as fais pour être sûr de bien comprendre.

ps: Merci pour le rappel, en effet je n'avais pas lu la documentation

Sujet Résolu