How to loop through an array, and get some data from database Angular 5

Question

I have the following array in component class (Angular 5):

this.collectionAdmins = ['uid_73hd', 'uid_38ng'];

Since I have tables in my database(firebase) with users info, I want to loop through the this.collectionAdmins array, retrieve each user information from the database, So will be able to display that info in the template.

'uid_73hd': {
  "bio": "about me info",
  "email": "[email protected]",
  "status": "online",
  "uid": "uid_73hd",
  "username": "mary"
},
'uid_38ng': {
  "bio": "about me info",
  "email": "[email protected]",
  "status": "online",
  "uid": "uid_38ng",
  "username": "john"
}

How can I achieve this?

if you're using firestore and angularfire2, you can using this: github.com/angular/angularfire2/blob/master/docs/firestore/… | if you're using firebase, you can apply this solution (github.com/angular/angularfire2/blob/master/docs/rtdb/…) with promise.all or observable combination operator like combineLatest, zip, etc — Tiep Phan
– Tiep Phan, Commented Feb 10, 2018 at 3:49
Am using firestore. I see the tutorials....still trying to figure out how that suits my case — Ericel
– Ericel, Commented Feb 10, 2018 at 3:55
e.g: we're using (github.com/angular/angularfire2/blob/master/docs/firestore/…) on users table, the code will look like this: jsbin.com/sunitojaho/edit?js — Tiep Phan
– Tiep Phan, Commented Feb 10, 2018 at 4:25
Can you add your comment as answer? it worked fine as I expected. Thanks — Ericel
– Ericel, Commented Feb 10, 2018 at 4:52

Tiep Phan · Accepted Answer · 2018-02-10 05:07:09Z

1

Because you’re using Firestore and AngularFire2, we can using following solution:

import { combineLatest } from 'rxjs/observable/combineLatest';

export class YourComponent {
  collectionAdmins = ['uid_73hd', 'uid_38ng'];


  constructor(private afs: AngularFirestore) {

    const abs = this.collectionAdmins
      .map(id => afs.doc<User>(`users/${id}`).valueChanges()); // users table, replace with your real table
    this.collections$ = combineLatest(abs);
  }
}

p/s: some other operators to combine observable: forkJoin, zip. Or Promise.all if you want to using Promise instead of Observable.

edited Feb 10, 2018 at 5:07

answered Feb 10, 2018 at 5:00

Tiep Phan

12.6k3 gold badges40 silver badges44 bronze badges

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

Collectives™ on Stack Overflow

How to loop through an array, and get some data from database Angular 5

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