-2

How can to join 3 firestore collection together, the answer as below ngOnInit() {

 // this.productService.getImageUrl().subscribe(products=> this.products = products)

this.products = this.afs.collection('/products', ref => ref.where('publish', '==', true))   .snapshotChanges().map(actions => {
return actions.map(a => {
  const data = a.payload.doc.data();
  const id = a.payload.doc.id;
  //this.afs.collection('productPhotos').doc(id)
  return this.afs.collection('users').doc(data.uid).snapshotChanges().map(userActions=>{
    return userActions.payload.data();
  }).map(user=>{
    //  return { id:id, url:user.url, ...data };
    return { id:id, displayName:user.displayName, email:user.email, ...data };
  })
});
 }).flatMap(merge => Observable.combineLatest(merge)).map(data => {
return [].concat(...data).map(d => {
  return d;
 })
 })
}
faye
  • 95
  • 7
  • I am not clear about your stackblitz code, from what i understood i posted a similar answer here [link1](https://stackoverflow.com/questions/49398981/rxjs-observables-does-not-display-data-on-subscribe-or-async/49409401#49409401) ,[link2](https://stackoverflow.com/questions/49860360/get-user-info-with-userid-angular-firestore/49902452#49902452). Hope it helps. – Hareesh Apr 19 '18 at 19:21
  • Thank you! I try to apply your solution on it. – faye Apr 19 '18 at 20:50
  • thank you the link 2 work well, I'm now try to add the 3rd table. This is tricky the 3 table. Could you please have a look at the stackblitz link – faye Apr 19 '18 at 23:49
  • Please edit your question with minimal code and briefly explain your problem. – Hareesh Apr 20 '18 at 10:36
  • Samuel Liew, c69, this is Angular 5 and firestore. I already answered my own question. – faye Apr 26 '18 at 14:10

1 Answers1

2

Below code will get you the urls 

ngOnInit() {

    this.products = this.afs.collection('/products', ref => ref.where('publish', '==', true))   .snapshotChanges().map(actions => {
    return actions.map(a => {
      const data = a.payload.doc.data();
      const id = a.payload.doc.id;
      return this.afs.collection('users').doc(data.uid).snapshotChanges().map(userActions=>{
        return userActions.payload.data();
      }).map(user=>{
        return this.afs.collection('productPhotos').doc(id).snapshotChanges().map(photoActions=>{
            return photoActions.payload.data();
        }).map(res=>{
          return { id:id, url:res.url, displayName:user.displayName, email:user.email, ...data };
        })
      }).flatMap(merge => Observable.combineLatest(merge))
    });
    }).flatMap(merge => Observable.combineLatest(merge)).map(data => {
    return [].concat(...data).map(d => {
      return d;
   })
 })

}
Hareesh
  • 6,770
  • 4
  • 33
  • 60
  • thank you, it works, one more problem , since the products is observable object, it has problem to loop ngFor in the ngFor, can you please help with the view. with multiple photos. How to subscribe this? – faye Apr 20 '18 at 13:23
  • You can ask a new question explaining your current problem, not come under the scope of this question title. – Hareesh Apr 20 '18 at 13:31
  • Hi: Hareesh can you please help my question is clear. How to show multiple images in this case. – faye Apr 20 '18 at 17:52
  • thank you Hareesh, your code work on multiple view. Thank you. – faye Apr 22 '18 at 01:33