title: Angular | Subscribe to multiple observables
body: <p>I'm trying to create a list of events that a user is going to. First I get event keys and then what I would like to do is subscribe to each event and listen for changes. Currently only the last event works because <code>this.eventRef</code> is being changed in the for loop.</p>
  
  <pre><code>eventRef: AngularFireObject&lt;any&gt;
  
  
  getEvents() {
  
  const eventsGuestsLookup = this.db.object(`eventsGuestsLookup/${this.uid}`).valueChanges()
  
  this.eventsGuestsLookupSub = eventsGuestsLookup
    .subscribe(eventKeys =&gt; {
  
      if (eventKeys) {
        console.log(eventKeys)
        for (const k in eventKeys) {
          if (eventKey.hasOwnProperty(k)) {
  
            this.eventRef = this.db.object(`events/${k}`)
  
            console.log(this.eventRef)
  
            this.eventRef.snapshotChanges().subscribe(action =&gt; {
  
              const key = action.payload.key
              const event = { key, ...action.payload.val() }
  
             this.makeEvents(event)
  
            })
          }
        }
      }
    })
  </code></pre>
  
  <p>}</p>
  
  <p>What I do next is get the user's response and for each status I want to display certain information. I don't know any other way of doing this, so I check both lists <code>attending</code> and <code>notAttending</code> and if there is a response from the user I change the event properties.</p>
  
  <pre><code>makeEvents(event) {
  console.log(event)
  
  event.goingText = "RSVP"
  event.setGoing = 'rsvp'
  event.setColor = "rsvp-color"
  
  const attending = this.db.object(`attendingLookup/${this.uid}/${event.key}`).valueChanges()
  
  this.attendingLookupSub = attending
    .subscribe(data =&gt; {
      console.log('attending', data)
      if (data) {
        event.goingText = "ATTENDING"
        event.setGoing = 'thumbs-up'
        event.setColor = 'attending-color'
      }
    })
  
  const notAttending = this.db.object(`not_attendingLookup/${this.uid}/${event.key}`).valueChanges()
  
  this.notAttendingLookupSub = notAttending
    .subscribe(data =&gt; {
      console.log('not attending', data)
      if (data) {
        event.goingText = "NOT ATTENDING"
        event.setGoing = 'thumbs-down'
        event.setColor = 'not-attending-color'
      }
    })
  
  this.events.push(event)
  </code></pre>
  
  <p>}</p>
  
  <p>*** Edit</p>
  
  <pre><code>const eventsGuestsLookup = this.db.object(`eventsGuestsLookup/${this.uid}`).valueChanges()
  eventsGuestsLookup.subscribe(keys =&gt; {
    of(keys).pipe(
      mergeMap(keys =&gt; {
        Object.keys(keys).map(k =&gt; {
          console.log(k)
        })
        return merge(Object.keys(keys).map(k =&gt; this.db.object(`events/${k}`)))
      })
    ).subscribe(data =&gt; console.log('data', data))
  })
  </code></pre>