title: Angular 4 map certain JSON data to class and return observable
body: <p>So I am trying to learn some basic Angular by creating an application that fetches and displays the current weather of a location using OpenWeather API.</p>
  
  <p>This is what I have in my code currently:</p>
  
  <p>app.component.ts:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { WeatherService } from './weather.service';    
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [WeatherService]
  })    
  export class AppComponent {
    title = 'Ng-Weather';
    cityName: string;
    weather: Weather;    
    constructor(private weather: WeatherService) { }    
    search() {
      this.weather.getWeatherbyName(this.cityName)
        .subscribe(res =&gt; this.weather = res);
      console.log(this.weather);
    }
  }
  </code></pre>
  
  <p>weather.service.ts:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Response, URLSearchParams } from '@angular/http';
  import { Observable } from 'rxjs';
  import { Weather } from './weather';
  @Injectable()
  export class WeatherService {
    APIurl = "http://api.openweathermap.org/data/2.5/weather";
    Appid = "xxx";
    weather: Weather;
    constructor(private http: Http) { }
    getWeatherbyName(name: string): Observable&lt;any&gt; {
      let myParams = new URLSearchParams();
      myParams.append('appid', this.Appid);
      myParams.append('q', name);
      return this.http.get(this.APIurl , { search: myParams} )
        .map(this.extractData)
        .catch(this.handleError);
    }
    private extractData(res: Response) {
      let body = res.json();
      this.weather.city = body.name;
      this.weather.description = body.weather[0].main;
      this.weather.temp = body.main.temp;
      console.log(this.weather);
    }
    private handleError(error: Response | any) {
      console.error(error.message || error);
      return Observable.throw(error.message || error);
    }
  }
  </code></pre>
  
  <p>weather.ts:</p>
  
  <pre><code>export class Weather {
      city: String;
      description: String;
      temp: String;
  }
  </code></pre>
  
  <p>So basically I am trying to map a JSON returned from OpenWeather API and get only some parts of the data and not the whole thing. The JSON returned is like following:</p>
  
  <pre><code>{  
      "coord":{  
          "lon":80.28,
          "lat":13.09
      },
      "weather":[  
          {  
              "id":802,
              "main":"Clouds",
              "description":"scattered clouds",
              "icon":"03n"
          }
      ],
      "base":"stations",
      "main":{  
          "temp":303.15,
          "pressure":1008,
          "humidity":79,
          "temp_min":303.15,
          "temp_max":303.15
      },
      "visibility":6000,
      "wind":{  
          "speed":3.1,
          "deg":210
      },
      "clouds":{  
          "all":40
      },
      "dt":1504805400,
      "sys":{  
          "type":1,
          "id":7834,
          "message":0.0017,
          "country":"IN",
          "sunrise":1504744074,
          "sunset":1504788314
      },
      "id":1264527,
      "name":"Chennai",
      "cod":200
  }
  </code></pre>
  
  <p>When the above code is executed, I get this error:</p>
  
  <pre><code>weather.service.ts:32 Cannot set property 'city' of undefined
  </code></pre>
  
  <p>Also how do I return an observable of type Weather and return that variable weather and catch it on the app.component.ts?</p>