Get data from different lists and combine them by key with angularfire 5

Since Angularfire5 we can't use the $key anymore So I was trying to convert this and found a snippet on how to change the list to a list containing their own key :

  getRankings(week): Observable<any>
  {
    return this.db.list('/ranking_day/d_' + week, ref => ref.orderByChild('position')).snapshotChanges()
    .map(rankings => {
     return rankings.map(action => ({ key: action.key, ...action.payload.val() }))
  })

Now I want to get some data from an object in

this.db.list('/userProfile' + key)

and combine this to return the observable to my component.

I am struggling way too hard with this so I guess I am missing something quite obvious...

PS I know my data model could be way better but that is something for later..

See if could help you.

getDrinks(pagename: string) {

  return this.database.list<DrinkType>(`/${pagename}/drinks`).snapshotChanges().pipe(map(changes => {
      return changes.map(c => ({
         key: c.payload.key,
         drinkType: this.database.list<DrinkType>(`${pagename}/drinkType/${c.payload.key}`) .snapshotChanges().pipe(map(actions => {
               return actions.map(action => ({
               key: action.payload.key,
               ...action.payload.val()
               }))
             })
           ),
          ...c.payload.val()
       }))

     })
  )

}