title: Nested subscribe and need all values to pass as body to API - Angular 6 RxJS
body: <p>I am developing a table component and the data for the table component is to be populated on basis of three dropdown values. I need to pass in all three values to the API to get the desired response. I can achieve it using nested subscribes, which is a very bad way. but any change calls the API multiple times. How can I fix it? Most examples I found are for getting only the final subscribe value but in my case, I need all three. Any advice to achieve using <code>tap</code> and <code>flatMap</code>?</p>
  
  <p>Please advice.</p>
  
  <pre><code>    this._data.currentGroup.subscribe(bg =&gt; {
          this.bg = bg;
  
          this._data.currentUnit.subscribe(bu =&gt; {
              this.bu = bu;
  
              this._data.currentFunction.subscribe(jf =&gt; {
                  this.jf = jf;
  
                  this.apiService.getFunctionalData(this.bg, this.bu, this.jf)
                  .subscribe(
                    (data) =&gt; {
                      console.log(data)
                    }
                  );
  
              });
          });
      });
  </code></pre>
  
  <p>This is what I did.</p>
  
  <pre><code>    this._data.currentGroup.pipe(
          tap(bg =&gt; this.bg = bg),
          flatMap(bu =&gt; this._data.currentUnit.pipe(
              tap(bu =&gt; this.bu = bu),
              flatMap(jf =&gt; this._data.currentFunction.pipe(
                  tap(jf =&gt; this.jf = jf)
              ))
          ))
      ).subscribe();
  </code></pre>
  
  <p>This is a sample example of my <code>dataService</code>. I initialize my <code>dataservice</code> in the table component's constructor as <code>_data</code>.</p>
  
  <pre><code>    changeGroup(bg: string) {
        this.changeGroupData.next(bg);
      }
  
      private changeGroupData = new BehaviorSubject&lt;string&gt;('');
      currentChangeGroup = this.changeGroupData.asObservable();
  </code></pre>