title: How to wait for my Angular subscription to complete inside a loop?
body: <p>I have an Angular 6 application where I am looping through an array and making an API for each item in the array inside my component. I want to wait until the data had been received and all logic within has been run before making the request for the next item in the array. Right now, it's just making multiple requests for the last item in the array. How do I make the loop wait for a response before moving onto the next request?</p>
  
  <pre><code>for (var index = 0; index &lt; data.length; index++) {
      this.deviceService.getMeasurementData(data[index].id, this.authService.userSession.authToken, this.filterModel.fromDate, this.filterModel.toDate)
      .subscribe(data =&gt; {
                 //logic where I transform data to be displayed in the view
  
  
      })
  
  }
  </code></pre>
  
  <p>I've tried to implement <a href="https://stackoverflow.com/questions/44752086/how-to-wait-for-subscriptions-inside-a-for-loop-to-complete-before-proceeding">THIS</a> solution, but can't quite get it to work, maybe it's a versioning issue. How can I create an observable/etc. make my loop wait for my data to be finished processing?</p>
  
  <p>Thanks so much! </p>