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

The getStudentList method of the service returns an Observable therefore it is an async function. So data => {this.items = data} line performs only after the subscription is completed. But this.items is not undefined since you assign it an empty array with items: any = [], it is only empty.

You can log the values with buttonClicked method because your http request has been completed.

I think you need to get more familiar with Observable from RxJS.

Here is the official docs of HttpClient: https://angular.io/guide/http

Answer 2

Remove this assignment this.items = this.studentListService.getStudent().... You are trying to assign Subscription object to this.items.

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

}

Note : You can only access it once the http (asynchronous) call is completed. And when it is completed, your dropdown should automatically load those items. If you try to print it outside subscribe block, it gives you undefined.

Answer 3

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.

  }

}

Answer 4

ngOnInit() {
       setTimeout(()=>
          {
            this.studentListService.getStudent().subscribe(response =>{
             this.items = response;
          },error=>{
           console.log(error);
         });
     },1000);
 }