CODEWITHSUNDEEP
angularangularfire2google-cloud-firestoreangular2-observables
Benoit
Benoit

Reputation: 472

Returing value from Angularfire2

I'm getting crazy with this, so I submit to the audience.

I need to return an Observable. I first call Firestore to retrieve a field that contains an array and then based on each value of the array, I want to retrieve the matching key. Fairly easy usually.

I see exactly what I cant on the console, so data are here, but why the hell they never show up in the view. Before I gave up, I made countless variations of the below.

My Service – Edited to reflect suggestions. Still not working 

    getUserActivites() {

    console.log(this.userId)
    let array = []

    const agenda = this.afs.doc(`users/${this.userId}`).snapshotChanges()

     agenda.subscribe(list => {
      const data = list.payload.data().activities
       data.map(event => {
        const id = event
        const dataRef = this.afs.doc(`activities/${event}`).valueChanges()
         dataRef.subscribe(date => {
           array.push(date)
           console.log(array) //array log the expected data in an array of Object
          return data 
        })
      })
    })
    return agenda
  }

My Component public agendaData: Observable<any>

then in constructor

this.agendaData = this.agenda.getUserActivites()

My View

<div *ngFor="let item of agendaData | async ">
{{ item.name }}
</div>

Upvotes: 2

Views: 254

Answers (2)

Makah
Makah

Reputation: 4523

1) I think you forgot to subscribe() in this.afs.....snapshotChanges(). One of the differences between Promise and Observables is that Observables is lazy - you need to subscribe it to start working.

2) If you do not need key/id you should use valueChanges() that is easier to use. Example (not tested):

getUserActivites() {
    let agenda = [] //Created for logging only

    let usersTask = this.afs.object(`users/${this.userId}`).valueChanges();     
    let myReturnTask = usersTask.subscribe(users => {           
        console.log('received users');
        users.map(user => {             
            const dataRef = this.afs.doc(`activities/${user.id}`).valueChanges()

            dataRef.subscribe(date => {
              agenda.push(date) //For logging purpose I created this array
              console.log(agenda) //Here I see exactly what I want!

              return date  // Why date is not returned?
            }) 
        })
    })

    return myReturnTask;
}

Upvotes: 1

oudekaas
oudekaas

Reputation: 315

Does getUserActivities = () => { work?

Is date an observable?

this.observableBooks = this.bookService.getBooksWithObservable();

getBooksWithObservable(): Observable { return this.http.get(this.url).map((res: Response) => res.json());

Sorry if it doesn’t answer your question I like to know myself what the issue is here!

Upvotes: 0

Related Questions