Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre du Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    décembre 2015
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Industrie

    Informations forums :
    Inscription : décembre 2015
    Messages : 35
    Points : 41
    Points
    41

    Par défaut Parcourir un Array de ma classe "Marker"

    Bien le bonjour, bonne reprise pour ceux qui viennent de reprendre le boulot et bon courage à vous !

    Alors, j'ai un petit soucis sur mon projet, qui est un projet Web fait en Angular version 6. Je possède des données dans ma base de données faites FireBase que je récupère facilement dans mon fichier TypeScript, suite à la récupération des données j'aimerai les stockés dans un tableau de ma classe appelé "Marker".

    Dans un premier temps voici le code de ma classe Marker :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    export class Marker {
        photo: string;
     
        title: string;
        descri: string;
        type: string;
        lat: number;
        lng: number;
     
        constructor(public titleSpot: string,
                    public description: string,
                    public typeSpot: string,
                    public latitude: number,
                    public longitude: number,
                ) {
            this.title = titleSpot;
            this.descri = description; 
            this.type = typeSpot;        
            this.lat = latitude;  
            this.lng = longitude; 
        }
    }
    Donc effectivement je récupère toutes les données qui vont bien dans ma base de données pour pouvoir créer des objets Marker et les mettres dans un tableaux. Pour cela dans mon TypeScript j'ai écrit cela :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
     
     markers: Marker[];
     
      constructor(private route: ActivatedRoute, private spotService: SpotService, private router: Router) {
          this.getAndCreateAllLocation();
      }
     
      getAndCreateAllLocation() {
     
            var ref = firebase.database().ref('/spots/');
            var query = ref.orderByKey();
            query.once("value")
            .then(function(snapshot) {
            snapshot.forEach(function(childSnapshot) {
            var key = childSnapshot.key;
            var childData = childSnapshot.val();
     
         console.log(childData.titleSpot);
         console.log(childData.description);
         console.log(childData.typeSpot);
         console.log(childData.latitude);
         console.log(childData.longitude);
         this.markers.push(new Marker(childData.titleSpot, childData.description, childData.typeSpot, childData.latitude, childData.longitude));
          });
        });
     
        for(let myMarker of this.markers) {
            console.log(myMarker);
        }
      }
    Ce code me génére une erreur dans la console :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    TypeError: Cannot read property 'markers' of undefined
    TypeError: Cannot read property 'markers' of undefined
    Je ne sais pas si je m'y prend correctement, suite à cela je souhaiterai récupérer la latitude et longitude de mon Marker pour pouvoir l'utilisé dans mon code HTML. Je sais pas si je m'y prend de la bonne façon non plus.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <agm-marker *ngFor="let marker of markers" [latitude]="marker.latitude" [longitude]="marker.longitude"></agm-marker>
    Je me doute que ça doit être une erreur de débutant.
    Je vous remercie d'avance et j'espère avoir été assez précis et clair pour en venir à bout !

  2. #2
    Membre à l'essai Avatar de spontoreau
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    mars 2018
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : mars 2018
    Messages : 8
    Points : 13
    Points
    13

    Par défaut

    Salut,

    Déjà il faut que tu prennes en considération les lifecycles d'angular: https://angular.io/guide/lifecycle-hooks. Comme tu peux le voir dans la doc, lorsque tu implémente OnInit, la méthode ngOnInit est appelé lors de l'initialisation du component, c'est là que ton appel à Firebase devrait être fait.

    Concernant la loop et l'erreur que tu as, cela me semble normal puisque que la boucle est fait sans prendre en considération l'état de la Promise. then renvoi toujours une autre promise, donc tu peux chain ton appel de then avec un autre appel à cette méthode pour mettre ta boucle dedans. Tu ne devrais pas avoir d'erreur à ce moment là.

    La gestion des états des Promises n'est pas toujours aisée, tu peux aussi utiliser async/await pour que ton code soit écrit de manière séquentielle.

    En espérant que cela t'aide.

    A+

  3. #3
    Membre du Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    décembre 2015
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Industrie

    Informations forums :
    Inscription : décembre 2015
    Messages : 35
    Points : 41
    Points
    41

    Par défaut

    ça marche ! Merci beaucoup pour le liens sur les lifecycles c'est quelque choses que je n'avais pas encore vraiment regardé et ce n'est pas du tout négligeable . Je vais me renseigner également sur les Promises parce que je pense que cela n'est pas encore trop claire pour moi, ce ne sont pas des choses évidente. Merci pour t'es conseils et ta réponse rapide!

  4. #4
    Membre du Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    décembre 2015
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Industrie

    Informations forums :
    Inscription : décembre 2015
    Messages : 35
    Points : 41
    Points
    41

    Par défaut

    Du coup j'ai fait cela :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
      getSpots() {
        return new Promise(
          (resolve, reject) => {
            firebase.database().ref('/spots/').once('value').then(
              (snapshot) => {
                snapshot.forEach(function(childSnapshot) {
                  var key = childSnapshot.key;
                  var childData = childSnapshot.val();
                 // console.log(key);
                // console.log(typeof this.markers);
               //  this.markers.push(childData.titleSpot, childData.latitude, childData.longitude);
               console.log(childData.titleSpot);
               console.log(childData.description);
               console.log(childData.typeSpot);
               console.log(childData.latitude);
               console.log(childData.longitude);
     
               this.spots.push(new Spot(childData.titleSpot, 
                childData.description, childData.typeSpot, childData.latitude, childData.longitude));
                });
                resolve(snapshot.val());
              }, (error) => {
                reject(error);
              }
            );
          }
        );
      }
    Cette méthode je l'appel directement depuis le ngOnInit();

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
      ngOnInit() {
        this.getSpots();
    }
    Comme ça si j'ai bien compris le code s’exécute à l'initialisation.
    Cependant j'ai toujours le message :
    TypeError: Cannot read property 'spots' of undefined
    TypeError: Cannot read property 'spots' of undefined


    Alors que j'ai déclaré ma variable plus haut dans mon code.
    PS: J'ai remplacé le nom Marker par Spot.

    Merci d'avance !

  5. #5
    Membre à l'essai Avatar de spontoreau
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    mars 2018
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : mars 2018
    Messages : 8
    Points : 13
    Points
    13

    Par défaut

    Tu as surement du trouver la réponse depuis, mais il semble que ton tableau n'est pas instancié.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Parcourir les membres d'une classe
    Par oodini dans le forum C++
    Réponses: 4
    Dernier message: 20/10/2006, 23h59
  2. [POO] vider un array membre de classe
    Par jlf dans le forum Syntaxe
    Réponses: 2
    Dernier message: 20/10/2005, 11h54
  3. [VB.NET] Parcourir les attributs d'une classe
    Par pasqwal dans le forum Windows Forms
    Réponses: 3
    Dernier message: 15/02/2005, 10h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo