Problem with fetch data from api to client in angular

Question

I have a problem with get data to the client using httpClient in my web app. when i check server everything is ok in Postman , but client in angular return empty object. thats my ICalendar interface:

export interface ICalendar {
  calendarName: string;
  userId: number;
  training: Array<{
    trainingTittle: string;
    date: string;
    excercises: Array<{
      excerciseName: string,
      numOfRepeat: number
   }>
  }>;
}

and thats how i get data in service:

 export class CalendarService {
  constructor(private http: HttpClient) { }

  public getAllTrainings() {
    return this.http.get<ICalendar[]>('https://localhost:5001/api/calendar');
  }

and thats how call method looks like:

  ngOnInit(): void {
this.calendarService.getAllTrainings()
  .subscribe(data => {
    this.trainings = data;
  });
console.log(this.trainings);

but log is empty console log of object

and thats how it looks like in database

someone know how to handle it?

Any errors in the console? How does the network request look like in your browser developer tool ? — Mehyar Sawas, Dec 08 '22 at 14:38
Since it is async call, your console.log execute first and returning empty. but you can console.log inside your subscribe and see — Pradeep, Dec 08 '22 at 14:38
use console.log inside subscribe i.e. subscribe(data => { console.log(data); this.trainings = data }); — Syed Khizaruddin, Dec 08 '22 at 14:44

score 0 · Answer 1 · answered Dec 08 '22 at 14:50

use console.log inside subscribe

ngOnInit(): void {
   this.calendarService.getAllTrainings().subscribe(data => {
    console.log(this.trainings);
    this.trainings = data;
  });

as calling an api is an asynchronous task it will take some time to get response, if you use console.log outside the subscriber then the control flow won't wait for the api call resulting in printing initial value of this.trainings variable,

if you call it inside subscriber the control flow will execute console.log after the api response has been completed hence console.log will get printed with values.

Problem with fetch data from api to client in angular

1 Answers1