Discussion :

[Kewty]

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 !

[spontoreau]

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+

[Kewty]

ç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!

[Kewty]

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.

Code :

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

  public spots: Spot[];

Merci d'avance !

[spontoreau]

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