-1

I made a grid consisting of 15 images which i fetched from a firebase database using angularfire2. I looped through the array, got each image, set an index (1..15), and showed them in the view.

Each image has a userID attached, but the user object is stored in another separate database:

Images DB

Users DB

I set the index in the ngFor loop like so:

*ngFor="let story of storiesArr; let i = index;" id={{i}}

And the index to the users:

this.storiesArr.forEach((story, index) => {
      this.getUserProfiles(story.userId, index)
    });

Expected outcome: So if user has uploaded a story, i need to put the userPicture from the corresponding user object to the view inside the ngFor loop.

Current status: I have all the data, and the indexes corresponding to which user uploaded a specific story.

How do I approach this?

Cœur
  • 37,241
  • 25
  • 195
  • 267
blixenkrone
  • 388
  • 2
  • 7
  • 20

1 Answers1

0

Two approach

approach # 1 : Retrieve all the stories and user profiles. Then loop through the required object, then substitute the mapped object based on the foreign key (firebase id referred in another entity / document).

Ref: https://dzone.com/articles/firebase-advance-querying-join-reference

approach # 2 : join in angular2 Firebase: joining tables

Do all these service call in ngOnInIt. Not in the template.

Senthil
  • 2,156
  • 1
  • 14
  • 19
  • Thank you! I have all the data in two separate arrays, with corresponding indexes. I'm not sure what you mean by "substitute the mapped object mased on the foreign key" though. Can you elaborate? – blixenkrone Jul 10 '18 at 12:29
  • 1
    var orders = firebase.database().ref().child('orders'); var users = firebase.database().ref().child('users'); orders.on('child_added', snap => { console.log(snap.val()); users.child(snap.val().userId).once('value', user => { console.log(user.val()); }); }); Ref this example . Having Orders and User Details in two different collections / Documents : https://dzone.com/articles/firebase-advance-querying-join-reference – Senthil Jul 10 '18 at 13:33