CODEWITHSUNDEEP
angulartypescript
sosick
sosick

Reputation: 622

Angular - fetch data from API

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.

I Tried:

photo.ts:

  export class Photo {
    title: string;
    farm: number;
    secret: string;
    server: string;
    owner: string;
    id: string;
  };

app.component.ts:

  export class AppComponent implements OnInit {

    photos: Photo[];

    constructor(private http: HttpService) {}

    ngOnInit() {
      this.getData();
    }

    getData() {
      this.http.getData().subscribe(data => {
        this.photos = data;
      });
    }
  }

and my main problem, http.service.ts:

export class HttpService {

  constructor(private http: HttpClient) { }

  getData(): Observable<Photo[]> {
    return this.http.get('https://api.flickr.com/path')
      .map(res => res.photos.photo);
  }
}

It seems to me that everything should work fine, but I get an error:

ERROR in src/app/http.service.ts(18,23): error TS2339: Property 'photos' does not exist on type 'Object'.

Upvotes: 2

Views: 12835

Answers (3)

codearmalik
codearmalik

Reputation: 25

This is very useful video with good example to fetch data from api using angularjs

https://www.youtube.com/watch?v=Lp8d4VZyhZc&t=666s

Upvotes: -2

Joe
Joe

Reputation: 186

Try implicitly setting res to 'any'

getData(): Observable<Photo[]> {
  return this.http.get('https://api.flickr.com/path')
    .map((res:any) => res.photos.photo);
}

Upvotes: 6

Lucho
Lucho

Reputation: 1547

Try this instead in your photo.ts to match the response structure

export interface Photo {
    title: string,
    farm: number,
    secret: string,
    server: string,
    owner: string,
    id: string,
    isFriend: number,
    isFamily: number,
    isPublic: number
  };

And in your callback change to this.photos = data.photos.photo

Upvotes: 1

Related Questions