title: Angular - fetch data from API
body: <p>I have to get data from flickr API. Precisely I need "photo" array from my URL.
  It works when I getting to data in app.component and operate on any, but I know that this is not a good solution.</p>
  
  <p>I Tried:</p>
  
  <p>photo.ts:</p>
  
  <pre><code>  export class Photo {
      title: string;
      farm: number;
      secret: string;
      server: string;
      owner: string;
      id: string;
    };
  </code></pre>
  
  <p>app.component.ts:</p>
  
  <pre><code>  export class AppComponent implements OnInit {
  
      photos: Photo[];
  
      constructor(private http: HttpService) {}
  
      ngOnInit() {
        this.getData();
      }
  
      getData() {
        this.http.getData().subscribe(data =&gt; {
          this.photos = data;
        });
      }
    }
  </code></pre>
  
  <p>and my main problem, http.service.ts:</p>
  
  <pre><code>export class HttpService {
  
    constructor(private http: HttpClient) { }
  
    getData(): Observable&lt;Photo[]&gt; {
      return this.http.get('https://api.flickr.com/path')
        .map(res =&gt; res.photos.photo);
    }
  }
  </code></pre>
  
  <p>It seems to me that everything should work fine, but I get an error:</p>
  
  <pre><code>ERROR in src/app/http.service.ts(18,23): error TS2339: Property 'photos' does not exist on type 'Object'.
  </code></pre>