Subscribe to observable is returning undefined

by

Maybe some pictures help?

The numbers here indicate the order of operations.

Send the Http Request
enter image description here

  1. Component is initialized and calls the getMovies method of the movieService.
  2. The movieService getMovies method returns an Observable. NOT the data at this point.
  3. The component calls subscribe on the returned Observable.
  4. The get request is submitted to the server for processing.
  5. The ngOnInit method is complete.

Any code here after the subscribe cannot access the movies property since the data has not yet been returned.

Receive the Http Response
enter image description here

At some LATER point in time …

  1. The movies are returned to the service.
  2. If the process was successful, the first callback function is executed.
  3. The local movies property is assigned to the movies returned from the service. It is only here that the movies property is finally set.

Attempting to access the movies property prior to step #8 results in an error.

Can we access the value here? NO
enter image description here

To fix it:
enter image description here

More Related Contents:

  1. How do I return the response from an Observable/http/async call in angular?
  2. Angular 2 – communication of typescript functions with external js libraries
  3. Is it a good practice using Observable with async/await?
  4. Plain Javascript as Angular 2 service
  5. typescript anonymous object with variable based label value
  6. How to load external scripts dynamically in Angular?
  7. Property ‘…’ has no initializer and is not definitely assigned in the constructor
  8. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  9. Angular 2: How to detect changes in an array? (@input property)
  10. Angular: Can’t find Promise, Map, Set and Iterator
  11. Angular 2 router event listener
  12. Angular2 component’s “this” is undefined when executing callback function
  13. Angular 2: TypeError: l_thing0 is undefined in [{{thing.title}} in AppComponent@4:44]
  14. Load existing components dynamically Angular 2 Final Release
  15. Angular 5 Scroll to top on every Route click
  16. How to handle window scroll event in Angular 4?
  17. Nested arrays in Angular 2 reactive forms?
  18. Angular: In which lifecycle hook is input data available to the Component
  19. Angular 4 Filter Search Custom Pipe
  20. Correct way Provide DomSanitizer to Component with Angular 2 RC6
  21. Whats the difference between using a class and interface?
  22. How to Pass data from child to parent component Angular
  23. What does Angular 2 hashtags in template mean?
  24. Generate dynamic css based on variables angular
  25. Angular interceptor exclude specific urls
  26. Angular 8 – Lazy loading modules : Error TS1323: Dynamic import is only supported when ‘–module’ flag is ‘commonjs’ or ‘esNext’
  27. How to iterate using ngFor loop Map containing key as string and values as map iteration
  28. How to check empty object in angular 2 template using *ngIf
  29. Angular: 7.2.1 ES6 class ReferenceError : Cannot access ‘X’ before initialization
  30. angular 2 access ng-content within component

Leave a Comment