Unable to load data inside ngOnInit

Question

My goal is to load a dropdown when a component renders. I have a service which hits a url and gets json data. Something like this

 @Injectable()
 export class St         


        

Answer 1

As Amit mentioned, since this is an async call, your data won't be available untill the subscribe block runs. So you won't be having access to data outisde it

Read the comments in the below code to understand:

export class StudentListComponent implements OnInit {
  items: any = [];

  constructor(private studentListService: StudentListService) {}

  ngOnInit() {
    this.studentListService.getStudent().subscribe(
      data => {
        this.items = data;
        //////////  Here this.items WILL BE DEFINED
      },
      err => console.error(err),
      () => console.log('Done Loading Student Data'));

    //////////  Here this.items WILL BE undefined as this will run synchronously i.e. it won't wait for this.studentListService.getStudent() to run.

  }

}