title: Angular 6: use a service to get local json data
body: <p>I have a movies.json that contain a list of movies and I want to create a MoviesServices to get the data where I want.</p>
  
  <p>My MoviesServices:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { HttpErrorResponse } from '@angular/common/http';
  
  @Injectable({
    providedIn: 'root'
  })
  
  export class MoviesService {
  
    movies: string[];
  
    constructor(private httpService: HttpClient) {
      this.getMovies();
    }
  
    getMovies() {
      this.httpService.get('../../assets/movies.json').subscribe(
        data =&gt; {
          this.movies = data as string[];
          console.log(this.movies); // My objects array
        },
        (err: HttpErrorResponse) =&gt; {
          console.log(err.message);
        }
      );
      console.log(this.movies); // Undefined
    }
  
  }
  </code></pre>
  
  <p>Firstly, I have no idea why the first <strong>console.log()</strong> works and the second not, can you tell me why ?</p>
  
  <p>Here is my component where I need to get the data:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { MoviesService } from '../services/movies/movies.service';
  
  @Component({
    selector: 'app-movies',
    templateUrl: './movies.component.html',
    styleUrls: ['./movies.component.css']
  })
  
  export class MoviesComponent implements OnInit {
    title = 'films-synopsys';
    movies;
  
    constructor(private myService: MoviesService) {}
  
    ngOnInit() {
      console.log(this.myService.movies); // Undefined
    }
  }
  </code></pre>
  
  <p>Of course this is not working. Can you tell me how must I do ? I'm newbie angular</p>