title: Angular is hitting the REST API url always in the second attempt
body: <p>My application has angular js front end and Django Rest API running in the backend. I am posting request to the API like this </p>
  
  <pre><code>  public getData(section) {
          console.log("I am here getVAM");
          return this.http.get('http://localhost:8000/vamcomponent/'+section+'/')
              .map((response: Response) =&gt; {
               console.log("I am here getVAM2");
               return response.json()
              });
      }
  </code></pre>
  
  <p>I am reading the data retrieved by the application like this </p>
  
  <pre><code> public getVamData(id,section): Observable&lt;any&gt; {
  
          this.getData(section).takeWhile(users =&gt; users.length &gt; 0).subscribe(result =&gt;{ 
          this.d=result;     
  }, error =&gt; console.log(error));   
          console.log(this.d);
          for(var i=0;i&lt;this.d[1].classes.length;i++){
                  console.log(this.d[1].classes[i])
                  return this.d[1].classes[i];
  
          }
        }
    }
  </code></pre>
  
  <p>The issue is that I am getting the data inside subscribe only during the second time. It comes as <em>undefined</em> in the first attempt and I am getting the data from REST API only in the second hit. So in the front end, only if I click the bar twice, I am able to show the data<a href="https://i.stack.imgur.com/GkXbm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GkXbm.png" alt="enter image description here"></a></p>
  
  <p>But when I hit the REST API from outside the application, I am able to fetch data in all attempts. I used <em>takeWhile()</em> in subscribe to make sure that only if I receive the data from REST API I am going to the next step of utilizing the data for showing it in the application.</p>