Subscribe to observable is returning undefined

Question

So I am trying to subscribe to a simple service that return data from a local JSON file.

I have managed to get the service working, I can log it out in the function

Answer 1

Maybe some pictures help?

The numbers here indicate the order of operations.

Send the Http Request

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

At some LATER point in time ...

6. The movies are returned to the service.
7. If the process was successful, the first callback function is executed.
8. 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

To fix it: