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.