title: Angular HttpClient mapping response to Model Class
body: <p>
  Hi. 
  I am trying to map a response to a model class, using the new HttpClient. 
  But it seems that my response never ends up having the functions from the model class. </p>
  
  <p>I understand that this is not the correct way of doing it, but how would one go about mapping a response to a model class?</p>
  
  <p>
  The get from my Api-service:</p>
  
  <pre><code>  listSimple(): Observable&lt;Array&lt;Airport&gt;&gt; {
      return this.http.get&lt;Array&lt;Airport&gt;&gt;(this.airportUrl + 'list')
    }
  </code></pre>
  
  <p>The use in the component: </p>
  
  <pre><code>  getAirports(){
      this.airportApi.listSimple().subscribe(
        res =&gt; {
          this.airportList = res;
          console.log("Airport list: ", res);
        },
        err =&gt; {
          //@TODO Incorporate global error handeling and remove this
          console.error("An error occoured while fetching the airport list!");
        });
    }
  </code></pre>
  
  <p>The model class: </p>
  
  <pre><code>export interface Inms {
      get_name:Function;
      get_value:Function;
      get_children:Function;
  }
  
  export class Airport implements Inms{
    IATA:string;
    name:string;
    trips:number;
    children:any;
  
    constructor(){ }
  
    public get_name() {
      return this.name;
    }
  
    public get_value() {
      return this.IATA;
    }
  
    public get_children() {
      return this.children? this.children : null;
    }
  
  }
  </code></pre>
  
  <p>
  Where I ty to use the function get_children this is the result: </p>
  
  <pre><code>_v.context.$implicit.get_children is not a function
  </code></pre>
  
  
  
  <p><strong>My solution:</strong>
  This is how I ended op handling the mapping, please let me know if there is any better or alternative solutions! </p>
  
  <pre><code>  //Returns a simplifyed list of all airports
    listSimple(): Observable&lt;Array&lt;Airport&gt;&gt; {
      return this.http.get&lt;Array&lt;Airport&gt;&gt;(this.airportUrl + 'list')
        .map(array =&gt; array
          .map(airport =&gt; new Airport(airport.IATA, airport.name, airport.trips))
        )
    }
  </code></pre>