Angular is hitting the REST API url always in the second attempt

Question

My application has angular js front end and Django Rest API running in the backend. I am posting request to the API like this

  public getData(section) {
        console.log("I am here getVAM");
        return this.http.get('http://localhost:8000/vamcomponent/'+section+'/')
            .map((response: Response) => {
             console.log("I am here getVAM2");
             return response.json()
            });
    }

I am reading the data retrieved by the application like this

 public getVamData(id,section): Observable<any> {

        this.getData(section).takeWhile(users => users.length > 0).subscribe(result =>{ 
        this.d=result;     
}, error => console.log(error));   
        console.log(this.d);
        for(var i=0;i<this.d[1].classes.length;i++){
                console.log(this.d[1].classes[i])
                return this.d[1].classes[i];

        }
      }
  }

The issue is that I am getting the data inside subscribe only during the second time. It comes as undefined 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

But when I hit the REST API from outside the application, I am able to fetch data in all attempts. I used takeWhile() 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.