title: How to map my Angular2 model to a json web api result
body: <p>I've created a simple Angular2 application to get a list of movies from an external web api (<a href="http://www.omdbapi.com/?s=" rel="nofollow">http://www.omdbapi.com/?s=</a>${keyword}). I get results in my application, but not the way I want. </p>
  
  <p>I want to map the returned json to my Movie model in my MovieService. </p>
  
  <p>This is what I have:</p>
  
  <p>The model looks like this (movie.model.ts):</p>
  
  <pre><code>export class Movie {
      constructor(
          public Title:string,
          public Year:string,
          public imdbID:string,
          public Type:string,
          public Poster:string
      ){  }
  }
  </code></pre>
  
  <p>movie.service.ts</p>
  
  <pre><code>// movie.service.ts
  import { Injectable } from '@angular/core';
  import { Movie } from '../models/movie.model';
  import { Http } from '@angular/http';
  import 'rxjs/Rx';
  
  const makeUrl = (keyword) =&gt; `http://www.omdbapi.com/?s=${keyword}`;
  
  @Injectable()
  
  export class MovieService {
      constructor(private http:Http){
      }   
          searchMovies(keyword)
          {
              return this.http.get(makeUrl (keyword))
  
                  //.map(res =&gt; &lt;Movie[]&gt; res.json());
                  .map(res =&gt; res.json())
                  //.map(movies =&gt; &lt;Movie[]&gt; movies.Search);
                  .map(movies =&gt; movies.Search);
          }
  }
  </code></pre>
  
  <p>Below the app.components.ts:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Movie } from './models/movie.model';
  import { HTTP_PROVIDERS } from '@angular/http';
  import {MovieService} from "./services/movie.service";
  
  @Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    providers  : [MovieService, HTTP_PROVIDERS]
  
  })
  export class AppComponent { 
      public movies:Movie[] = [];
      public title:string = "My super movies!";
  
      constructor(private movieService:MovieService) {
  
      }
  
      searchMovies(keyword) {
          this.movieService.searchMovies(keyword)
              .subscribe(movieData =&gt; {
                      this.movies = movieData;                    // 1. success handler
                  },
                  err =&gt; console.log(err),                        // 2. error handler
                  ()=&gt; console.log('Getting movies complete...')  // 3. complete handler
              )
  
      }
  }
  </code></pre>
  
  <p>This is my app.component.html</p>
  
  <pre><code>&lt;!-- app.component.html --&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;
          &lt;h1&gt;Movies via OMDb API&lt;/h1&gt;
          &lt;div&gt;
              &lt;input type="text" #keyword class="input-lg" placeholder="movie name..."&gt;
              &lt;button class="btn btn-primary" (click)="searchMovies(keyword.value)"&gt;Find movies&lt;/button&gt;
          &lt;/div&gt;
          &lt;table class="table table-striped"&gt;
              &lt;tr&gt;
                  &lt;th&gt;Naam&lt;/th&gt;
                  &lt;th&gt;Jaar&lt;/th&gt;
                  &lt;th&gt;Poster&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr *ngFor="let movie of movies"&gt;
                  &lt;td&gt;{{ movie.Title }}&lt;/td&gt;
                  &lt;td&gt;&lt;span class="movieYear"&gt;{{ movie.Year}}&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;img src="{{movie.Poster}}" alt="Movie" class="moviePoster"/&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the main.ts</p>
  
  <pre><code>import { bootstrap }    from '@angular/platform-browser-dynamic';
  import { HTTP_PROVIDERS } from '@angular/http';
  
  import { AppComponent } from './app.component';
  
  bootstrap(AppComponent, [HTTP_PROVIDERS]);
  </code></pre>
  
  <p>The application package.json, systemjs.config.js, tsconfig.json and typings.json are all from the <a href="https://angular.io/docs/ts/latest/quickstart.html#!#wrap-up" rel="nofollow">QuickStart tutorial on Angular.io</a></p>