IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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

TypeScript Discussion :

[ANGULARFIRE-2] Comment mapper une liste FirebaseObservable en Array of <T> ?


Sujet :

TypeScript

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    130
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2005
    Messages : 130
    Points : 91
    Points
    91
    Par défaut [ANGULARFIRE-2] Comment mapper une liste FirebaseObservable en Array of <T> ?
    Bonjour,
    Voici mon exemple simplifié :
    Ci-dessous, la classe que je stocke dans firebase par des push :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    export class Message {
      author: string; content: string; 
     
    concat(): string { 
      return this.author + ' :' + this.content; 
    }
    Ici la Data Service, qui se connecte à Firebase :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    export class MessageService { 
      lstMessages: FirebaseListObservable<Message[]>; 
      constructor(private af: AngularFire) { 
            this.lstMessages = af.database.list('/messages'); 
      } 
     
    getLastest(): Observable<Message[]> { 
      return this.lstMessages; } 
     
    send(msg: Message) { 
      this.lstMessages.push(msg); } }
    Et finalement le app.component :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    export class AppComponent { 
       messages: Message[] = []; 
       constructor(private msgService: MessageService) { 
            this.msgService.getLastest().subscribe( 
                (data: Message[]) => { this.messages = data; console.log(this.messages[0].concat()); } 
            ); 
        }
    Au final ça fonctionne dans la mesure où je récupère bien un Object[] avec mes champs, mais ce n'est pas vraiment des Message (class). Ainsi, si j'appelle depuis le résultat la méthod concat (), j'obtiends une erreur :

    FIREBASE WARNING: Exception was thrown by user callback. TypeError: _this.messages[0].concat is not a function
    at SafeSubscriber._next
    Bien sûr, ça fonctionne si je récrée l'objet :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    this.msgService.getLastest().subscribe( 
        (data: Message[]) => { data.forEach( 
                 (items) => this.messages.push(new Message(items.author, items.content)
                 )
        );}
    )
    Mais ça n'a plus aucun intérêt...

    Savez-vous comment récupérer ou traiter le data pour qu'il corresponde bien à ma classe .?

    D'avance merci,

    Mand.Net

  2. #2
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    130
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2005
    Messages : 130
    Points : 91
    Points
    91
    Par défaut
    Pour le moment j'ai créé une classe avec une méthode générique qui permet d'assigner les valeurs à mes classes models en passant leurs valeurs JSON.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    export class DataModelHelper {
       $key: string;
      static CreateFromJsonObject<T>(target: T, source: DataModelHelper): T {
        Object.assign(target , {$key: source.$key} , source);
        return target;
      }
    }
    Le principe c'est que les classes modèles doivent dériver de DataModelHelper

    Cela permet ensuite dans ma couche service/data de renvoyer une observable qui contient bien un Array de mes classes modèles :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    getAllLessons(): Observable<Lesson[]> {
      return this.af.database.list('/lessons')
        .do(console.log)
        .map( item1 => item1
          .map( item2 => DataModelHelper.CreateFromJsonObject<Lesson>((new Lesson), item2)));
    }
    Je ne trouve toujours pas ça idéal. J'aimerais bien savoir comment les gens s'y prennent en général.

    Cdlt,

  3. #3
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    130
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2005
    Messages : 130
    Points : 91
    Points
    91
    Par défaut
    Euh sérieux, il n'y a pas de développeur francophone TypeScript sur Angular ou quoi ? J'ai posté il y a deux jours sur stack overflow et j'ai déjà 8 réponses. Y a-t-il d'autres forums francophones ? J'ai l'impression que Developpez est mort.

  4. #4
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    Il n'y a effectivement pas beaucoup de membres qui participent au forum TypeScript. Il en suffit d'un ou deux pour faire vivre le flux et l'animer petit à petit jusqu'à ce que la sauce prenne. Tu es donc le bienvenu pour :

    • partager la solution que tu as finalement adoptée pour résoudre ton problème ;
    • répondre régulièrement (c'est en fait là que le bât blesse généralement) aux questions des autres ;
    • proposer des actualités concernant TypeScript ;
    • ajouter du contenu (critique de livre, article, tutoriel, QR de FAQ, etc.) à la rubrique.


    Si plusieurs membres font de même, j'ose espérer que la rubrique sera un jour plus vivante.

    Nous rencontrons ce genre de problème sur une bonne partie de nos forums réservés aux frameworks JavaScript. Il y a trop d'outils et donc peu d'experts. La francophonie représente un faible pourcentage des développeurs dans le monde, ce qui réduit d'autant plus les membres actifs.

  5. #5
    Membre chevronné

    Homme Profil pro
    Développeur .NET
    Inscrit en
    Juillet 2009
    Messages
    966
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Juillet 2009
    Messages : 966
    Points : 2 078
    Points
    2 078
    Par défaut
    Salut, désolé du retard certains mais actuellement je ne bosse plus trop en typeScript.
    J'ai résolu ce problème avec un solution comme la tienne. a la différence que je fais hérité mon objet d'un BaseObject qui peux prendre en entrer ou nom le Json dans le constructeur.

    Bref ça reviens un peu au même si ce n'es que je trouve cela plus simple a écrire...
    un jour, quelqu'un a dit quelque chose...

  6. #6
    Membre éclairé
    Avatar de LearningBoy
    Homme Profil pro
    Ingénieur Logiciel - Fullstack JavaScript
    Inscrit en
    Août 2017
    Messages
    73
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur Logiciel - Fullstack JavaScript
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Août 2017
    Messages : 73
    Points : 664
    Points
    664
    Par défaut Le mot-clef "as" !
    Salut Mandotnet,

    Si tu connais exactement la structure du JSON renvoyé par l'api, tu peux mapper directement un de tes objets TypeScript sur la réponse de l'API,
    grâce au mot-clef "as".

    Prenons un exemple avec un objet Pokemon :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    getPokemons(): Promise<Pokemon[]> {
      return this.http.get('app/pokemons')
                 .toPromise()
                 .then(response => response.json().data as Pokemon[])
                 .catch(this.handleError);
    }
    Dans cet exemple, la réponse de l'API est bien transformé en un tableau d'objets métiers, ici un Pokémon.

    J'espère que cet exemple pourra t'aider.

    Simon,

    Auteur sur https://awesome-angular.com.
    Découvrez "Angular, ECMAScript 6 et TypeScript" pour vos futurs développements web...

  7. #7
    Membre chevronné

    Homme Profil pro
    Développeur .NET
    Inscrit en
    Juillet 2009
    Messages
    966
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur .NET

    Informations forums :
    Inscription : Juillet 2009
    Messages : 966
    Points : 2 078
    Points
    2 078
    Par défaut
    bien vu, je n'y ai pas pensé.

    (bon faut dire que je bossais en Knockout, du coup les objets sont un peu différent).
    un jour, quelqu'un a dit quelque chose...

Discussions similaires

  1. Comment mapper une liste d'objet standard
    Par horfee dans le forum JPA
    Réponses: 2
    Dernier message: 21/04/2010, 18h24
  2. Comment faire une liste d'image de choix ?
    Par poussinphp dans le forum Composants VCL
    Réponses: 4
    Dernier message: 01/10/2005, 01h34
  3. Réponses: 5
    Dernier message: 29/09/2005, 15h37
  4. Comment initialiser une liste de composants avec une boucle ?
    Par EricSid dans le forum Composants VCL
    Réponses: 5
    Dernier message: 06/04/2005, 19h46
  5. [PDFBox]Comment manipuler une LIST
    Par marcotop dans le forum Documents
    Réponses: 11
    Dernier message: 27/08/2004, 16h46

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