Undefined after use and save values into an array in map function (Angular, TypeScript)

Question

I'm working lately in a project where I use Angular and TypeScript. Doing the CRUD, I have the next code:

      // Return User's List from the DB
  get_AllUsers(){
    return this.fireservices.collection('users').snapshotChanges();
  }

  getAllUsersList() : User[]{
    let userList : User[];
    this.get_AllUsers().subscribe(users => {
      userList = users.map(e => {
          return {
            uid: e.payload.doc.id,
            ...
            visited: e.payload.doc.data()['visited']
          }
      }); //console.log(userList) here print the array correctly
    });
  return userList; //Here I received an undefined array, but I want the array with the data
  }

I'm using Firebase as a DB. I have a model created for User (one type of data saved in DB) and I want that the return, returns array of Users listed, but I receive an undefined array. How could I solve that? I've put some annotations to explain the error.

PD. Is there any way to receive Firebase data directly in a model created to use it in the application ('User' in this case)?

Thanks.

Sam · Accepted Answer · 2020-11-02 17:38:27Z

2

This is an asynchronous call, it should be handled the same way.

Here you're returning an undefined variable, and you're not returning the response of the request. Instead return an observable and subscribe to the calling method. For ex: _.getAllUsersList().subscribe(x => ...)

getAllUsersList() : Observable {
    return this.get_AllUsers().pipe(map(e => {
          return {
            ... // your code
          })
      });
    });
  }

edited Nov 2, 2020 at 17:38

answered Nov 2, 2020 at 17:25

Sam

6321 gold badge5 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ángel Baeza Over a year ago

function map used throw me error. Error is next: Property 'map' does not exist on type 'Observable<DocumentChangeAction<unknown>[]>. PD. I have added Observable<User[]> in the return value

ricardo-dlc · Accepted Answer · 2020-11-03 13:50:09Z

1

Try to do it directly:

function getAllUsersList() : User[] {
  let userList : User[] = [];
  this.get_AllUsers().subscribe(users => {
    users.map(e => {
      userList.push({
        uid: e.payload.doc.id,
        visited: e.payload.doc.data()['visited']
      });
    });
  });
  return userList;
}

edited Nov 3, 2020 at 13:50

answered Nov 2, 2020 at 17:16

ricardo-dlc

4861 gold badge3 silver badges10 bronze badges

5 Comments

Ángel Baeza Over a year ago

If I do this, all the function throw error due to the first return. Error is next: Type 'Subscription' is missing the following properties from type 'User[]': length, pop, push, concat, and 26 more

ricardo-dlc Over a year ago

If the return gives you what you want, you can assert the type adding as User[] next to the return.

Ángel Baeza Over a year ago

Do that gives me the same error. You can see in: i.imgur.com/YfpnvDd.png

ricardo-dlc Over a year ago

It suggests to convert to unknown first before convert to User[]. Have you tried that?

ricardo-dlc Over a year ago

Check my update, if this doesn't work you can check this in order on how to implement an Observable like the other answer sugests

Collectives™ on Stack Overflow

Undefined after use and save values into an array in map function (Angular, TypeScript)

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related