title: How to combine two Observables into one Observable Array using RxJs
body: <p>I am trying to combine two Observables into a single Array of Observables that my Angular App can subscribe to and receive values over time. The scenario is using a chat bot. The user provides input, the bot responds and the two are combined in an array for the chat flow.</p>
  
  <p>See the below:</p>
  
  <p>Chat input component to get the user input:</p>
  
  <pre><code>  onNewComment(value: string): void {
      this.chatService.addComment(value);
    }
  </code></pre>
  
  <p>This then speaks to <code>chat.service.ts</code></p>
  
  <pre><code>import { Injectable, Output } from '@angular/core';
  import { Observable, BehaviorSubject, Subject, combineLatest, from, merge, concat } from 'rxjs';
  import { environment } from '../../environments/environment';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { UserInput } from '../interfaces/user-input';
  import { map, tap, switchMap, mergeMap, toArray, scan, shareReplay, take } from 'rxjs/operators';
  import { of } from 'rxjs';
  import { text } from '@angular/core/src/render3';
  import { Division } from '../interfaces/division';
  
  
  const headers = new HttpHeaders();
  headers.append(
      'Content-Type', 'application/json'
  );
  
  @Injectable({
    providedIn: 'root'
  })
  export class ChatService {
    apiUrl = environment.apiUrl;
    conversationSubject: BehaviorSubject&lt;any[]&gt; = new BehaviorSubject&lt;any&gt;([]);
    conversationArray$: Observable&lt;any&gt; =  this.conversationSubject.asObservable();
    private commentAddedSubject = new Subject&lt;any&gt;();
    commentAddedAction$ = this.commentAddedSubject.asObservable();
  
  
    sessionToken$ = this.http.get&lt;any&gt;(`${this.apiUrl}/api/session`).pipe(
      map(data =&gt; data.session_id),
      tap(data =&gt; this.addComment('')),
      shareReplay(1)
    );
  
    commentWithSessionToken$ = combineLatest([
      this.sessionToken$,
      this.commentAddedAction$
    ]).pipe(
      map(([sessionToken, comment]) =&gt; {
        return {
          session_id: sessionToken,
          input: {
            text: comment
          },
          };
        }
      ),
    );
  
  
    botResponse$ = this.commentWithSessionToken$
      .pipe(
        switchMap(comment =&gt;
          of(comment)
            .pipe(
              mergeMap(data =&gt; this.http.post&lt;any&gt;(`${this.apiUrl}/api/message`,
                {
                  userInput: data
                },
                {
                  headers: headers
                })
                ),
              )
            )
        );
  
    addComment(newComment?: string) {
      this.commentAddedSubject.next(newComment);
    }
  
    constructor(
      private http: HttpClient,
    ) { }
  }
  
  
  </code></pre>
  
  <p>I have tried a number of ways to combine <code>commentWithSessionToken$</code> and <code>botResponse$</code> into an array of user input and bot response but not having any luck. The end result I need is something like:</p>
  
  <p><code>[commentWithSessionToken$, botResponse$, commentWithSessionToken$, etc, etc]</code></p>
  
  <p>Any advice would be much appreciated. Thank you.</p>