title: How to wait and get response for each HttpClient service call from a loop in Angular 4
body: <p>I have a situation where I need to run a loop and fetch respective items' <strong><em>description</em></strong>. Then along with the item Ids and other information I have to include the fetched <strong><em>description</em></strong> in a datatable.</p>
  
  <pre><code>addDescription(){
  this.arrayOfItems.forEach(element =&gt; {
  
     // CALL a function which will make a service call
     this.fetchDescription(element);
  
     //CODE TO DECLARE AN INTERFACE TO ASSIGN RESPECTIVE VALUES. eg.
  
     // ITEM_ID : element.id,
     // ITEM_DEF : this.fetchedDescription.join("\n")
  }
  </code></pre>
  
  <p>Function body:</p>
  
  <pre><code>fetchDescription(elementToFetchDesc){
  
   //Declaring HTTPPARAMS in PassingParams variable
  
   this.componentService.getDesc(PassingParams)
           .subscribe((response: HttpResponse&lt;any&gt;) =&gt; {
                  if(response.status ==200){
                      this.fetchedDescription = reponse.body.output.slice(6,-1);
                  }
                  //Code if response status is NOT 200
  }
  </code></pre>
  
  <p>In <code>componentService</code> Service:</p>
  
  <pre><code>construcutor(private httpConn: HttpClient){}
  
  getDesc(Params){
      // Declare URL
      return this.httpConn.get(URL, {params: Params, observe: 'response'});
  }
  </code></pre>
  
  <p>The <strong>problem</strong>:</p>
  
  <p>As it's running in a loop and the subscription is an async call, so, after running the loop in <code>forEach</code> it's coming out. As a result the <strong><em>description</em></strong> is not getting assigned to the variable (<code>ITEM_DEF</code>) in the interface.</p>
  
  <p>To solve this issue I implemented a little change to use <code>promise</code>.
  In service I added:</p>
  
  <pre><code> import 'rxjs/add/operator/toPromise';
  </code></pre>
  
  <p>And updated the service method as:</p>
  
  <pre><code> return this.httpConn.get(URL, {params: Params, observe: 'response'})
                       .toPromise();    // converted observable into promise
  </code></pre>
  
  <p>Also changed in component:
  Inside <code>fetchDescription</code> function:</p>
  
  <p>replaced <code>.subscribe</code> as <code>.then</code></p>
  
  <p>But the issue still persists. Please let me know where I'm doing wrong to implement this logic.</p>