title: How to display data from local Json file?
body: <p>I'm new to Angular, Trying to build a movie app.</p>
  
  <p>I want to fetch data from JSON file which is on my local machine. I can display all the movies from the JSON file in the MovieListComponent. But When the user clicks on the view detail of a particular movie I am not able to display the data in the MovieDetail component. </p>
  
  <p><strong>MovieListComponent.ts</strong> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Component ,OnInit} from '@angular/core';
  import {MovieService} from '../services/movie.service';
  import {Router} from '@angular/router';
  import {Movie} from '../movie';
  @Component({
    moduleId:module.id,  
    templateUrl: 'search.html',
  })
  export class MovieListComponent implements OnInit { 
    movies:Movie[];
    constructor(
                private _movieservice:MovieService, 
                private router:Router ){  
                } 
    getMovies():void{
      this._movieservice.getMovies().then(movies =&gt; this.movies = movies);
    }
    ngOnInit(){
      this.getMovies();
    }  
    onSelect(movie:Movie):void{
      this.router.navigate(['/movies',movie.id]);
      console.log(movie.title);
    } 
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>MovieDetailComponent.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Component,OnInit} from '@angular/core';
  import {ActivatedRoute,Params} from '@angular/router';
  import {Location} from '@angular/common';
  import 'rxjs/add/operator/switchMap';
  import {MovieService} from '../services/movie.service';
  import {Movie} from '../movie';
  
  @Component({
      template:`&lt;div *ngIf="movie"&gt;
                  {{movie.title}}
                  &lt;h4&gt;You're seleted departmentId is =  {{movie.id}} &lt;/h4&gt;
               &lt;/div&gt;`
  })
  
  export class ViewDetailComponent implements OnInit{
  
    movie:Movie;
  
    constructor(
      private route:ActivatedRoute,
      private movieservice:MovieService,
      private location:Location){}
  
    ngOnInit():void{
      this.route.params
      .switchMap((params:Params) =&gt; this.movieservice.getMovie(+params['id'] ))
      .subscribe(movie =&gt; this.movie = movie);    
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>MovieService.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import{Injectable} from '@angular/core';
  import {Http} from '@angular/http';
  import {Movie} from '../movie';
  import 'rxjs/add/operator/toPromise';
  
  @Injectable()
  export class MovieService{
      private movieUrl = './app/movies.json';
      constructor(private _http:Http){
          console.log('Movie Service up and running');
      }
      getMovies():Promise&lt;Movie[]&gt;{      
          return  this._http.get(this.movieUrl)
          .toPromise().then(res =&gt; res.json() as Movie[]);
          //.map(res =&gt; res.json());
      }
      getMovie(id: number):Promise&lt;Movie&gt;{
         // const url = `${this.movieUrl}/${id}`;
          return this._http.get(this.movieUrl)
          .toPromise().then(res =&gt; res.json() as Movie)  
      }
  }</code></pre>
  </div>
  </div>
  </p>