Get values of map on angular/Typescript

Question

I'm trying to get the values of a map:

UtilisateursService.ts

 getIntervenants():Map<string,string> {
          let IdDisplayNameInt = new Map();

          firebase.database().ref("/users").orderByKey().once("value")
            .then(function(snapshot) 
                    {
                      snapshot.forEach(function(childSnapshot) 
                      {

                          IdDisplayNameInt.set(childSnapshot.val().UserId,childSnapshot.val().firstName + " " +childSnapshot.val().lastName);
                      }

                      )
                     }); 
          return IdDisplayNameInt;
          }

in new-cl-component.ts i have:

this.intervenantsList=this.userService.getIntervenants();
    console.log("this.intervenantsList = ",this.intervenantsList);

    console.log("this.intervenantsList.values =  ",this.intervenantsList.values());


    for (var valeur of intervenantsList.values()) {
      console.log("valeur = ",valeur);
        this.DisplayNameIntervenants.push(valeur)    }

        console.log("this.int = ",this.DisplayNameIntervenants)    ;

The map intervenantsList contains all the data that i need,

but when i try to display intervenantsList.values(), it's empty:

i tried with a basic map, and it works

let map = new Map();
        map.set("A",1);
        map.set("B",2);
        map.set("C",3);
        console.log("map = ",map);
        console.log("map.values= ",map.values());---- returns 1,2,3

Barremian · Accepted Answer · 2020-05-26 14:49:42Z

getIntervenants() function is trying to return asynchronous data synchronously. IdDisplayNameInt variable is assigned asynchronously inside the function. You need return the value asynchronously as well. One way would be to use RxJS Subject. Try the following

Service

import { Observable, Subject } from 'rxjs';

getIntervenants(): Observable<Map<string,string>> {
  let result = new Subject<Map<string,string>>();

  firebase.database().ref("/users").orderByKey().once("value")
    .then((snapshot) => {
      let IdDisplayNameInt = new Map();
      snapshot.forEach((childSnapshot) => {
        IdDisplayNameInt.set(childSnapshot.val().UserId,childSnapshot.val().firstName + " " +childSnapshot.val().lastName);
      });
      result.next(IdDisplayNameInt);
    });

  return result.asObservable();
}

Then you need to subscribe to the getIntervenants() function in the component

this.userService.getIntervenants().subscribe(
  intervenants => { 
    this.intervenantsList = intervenants;
    console.log("this.intervenantsList = ", this.intervenantsList);
    console.log("this.intervenantsList.values =  ", this.intervenantsList.values());
    for (var valeur of intervenantsList.values()) {
      console.log("valeur = ",valeur);
      this.DisplayNameIntervenants.push(valeur);
    }
    console.log("this.int = ", this.DisplayNameIntervenants);
  }
);

Collectives™ on Stack Overflow

Get values of map on angular/Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related