title: Angular 4 - What is the best way to handle the nested Subscriptions in Iterations
body: <p>I am trying to handle a situation where the subscriptions of http calls are nested in iterations.</p>
  
  <p>1) In first returned observable I will get an object of URLS</p>
  
  <p>2) I need to iterate through these URLS and make http calls on these URls</p>
  
  <p>3) The same case in third step, I will get the urls and do the same as in second</p>
  
  <p>4) finally the data which I get from third step I need to push to final object.</p>
  
  <pre><code>let finaldata = [];
  this.service1.getstep1Data().subscribe((data1) =&gt; {
    // data1 = { name : 'abc', urls : ['http://url1.com','http://url2.com',........,'http://urlz.com']};
    data1.urls.foreach((url) =&gt; {
      this.service2.getstep2Data(url).subscribe((data2) =&gt; {
        // data2 = { name : 'abc', urls : ['http://url1.com','http://url2.com',........,'http://urlz.com']};
        data2.urls.foreach((url) =&gt; {
          this.service3.getfinalData(url).subscribe((data) =&gt; {
            // data = ["one","two"...."xyz"]
            finaldata.push(data[0]);
          })
        })
      })
    })
  })
  </code></pre>
  
  <p>Now the problem is handling the async calls in Iterations which will not wait for each other.</p>
  
  <p>I want to wait for all Async calls to complete in step two and then execute step three else we don't have URLS for the third step to make rest calls</p>
  
  <p>I know iterating the async calls is not a good practice.</p>
  
  <p>Can some one help me with the best practice for this.</p>
  
  <p>************ Thanks in Advance *************</p>