title: multiple get observable requests in a for loop Angular2 Django
body: <p>I am trying to perform several get requests using Angular2 in Django/python.</p>
  
  <p>I am able perform an API request and get a list of users to find the id of the current user. I then perform a <code>.flatMap</code> operation to perform a second request to get a list of all comments. I compare the userId to the list of comments to select only the comments made by the user. All data I receive is JSON. </p>
  
  <p>At this point, I am trying to get the Article that belongs to each comment made. But when I try to run a function to try to get data in a for loop, the request does not even get performed. </p>
  
  <p>Heres my service:</p>
  
  <pre><code>import {Injectable} from "angular2/core";
  import {Http, Headers, Response} from "angular2/http";
  import 'rxjs/Rx';
  import {Observable} from "rxjs/Observable";
  
  @Injectable()
  export class DataService {
    profileUserName: profileUserName = document.getElementsByClassName('profile-user-name')[0].children[0].innerHTML;
    userComments: [];
  
    constructor (private _http: Http) {}
  
    getUsers(): Observable&lt;any&gt; {
      return this._http.get('/api/v1/users/?format=json')
          .map((res: Response) =&gt; {
              this.userList = res.json();
              // select only comments made by current user
              for (i = 0; i &lt; this.userList.length; i++) {
                  if(this.profileUserName == this.userList[i].username){
                      this.userId = this.userList[i].url
                  }
              }
          })
          .flatMap(() =&gt; this._http.get('/api/v1/article_comments/?format=json')).map((res: Response) =&gt; {
              this.commentList = res.json();
              let userComments = [];
  
              for (i = 0; i &lt; this.commentList.length; i++) {
                  if (this.commentList[i].user == this.userId) {
                      userComments.push(this.commentList[i])
                  }
              }
              this.userComments = userComments;
              return this.parseArticleComments();
          })
  
    }
  
    parseArticleComments() {
      for (i = 0; i &lt; this.userComments.length; i++) {
          this.currentSelection = this.userComments[i];
          this.getArticleComments(this.currentSelection)
      }
      // response should/is returned here to the appComponent
      return this.userComments
    }
  
    // currently not performing any http requests
    getArticleComments(currentSelection): Observable&lt;any&gt; {
      // currentselection.article == http://localhost:8000/api/v1/articles/10/?format=json
      return this._http.get('currentselection.article')
          .map((res: Response) =&gt; {
              console.log('entered');
              currentSelection.articles = res.json();
              return currentSelection.articles;
          })
    }
  }
  </code></pre>
  
  <p>Heres my app.component:</p>
  
  <pre><code>import {Component, OnInit} from 'angular2/core';
  import {DataService} from './data.service.ts';
  
  @Component({
    selector: 'http-app',
    template: `
      &lt;div&gt;
          &lt;button (click)="logGetRequest()"&gt;Log Reqeust&lt;/button&gt;
            &lt;ul&gt;
                &lt;li *ngFor="let comment of commentList"&gt; {{ comment.article }}  &lt;/li&gt;
              &lt;/ul&gt;
      &lt;/div&gt;
    `,
    providers: [DataService]
  })
  
  export class AppComponent{
    commentList: string;
  
    constructor ( private _dataService: DataService) {}
  
    //get list of users to find user ID
    getUserList = this._dataService.getUsers()
      .subscribe(
          data =&gt; this.commentList = (data),
          error =&gt; console.error(error)
      );
  
    logGetRequest() {
      console.log(this.commentList);
    }
  }
  </code></pre>
  
  <p>Any suggestions or ideas as to why I cannot perform these requests?</p>