Angular - fetch data from API

Question

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'.

@Manjunath i edit the question and add console.log(res) img. — sosick
– sosick, Commented Nov 19, 2018 at 22:22

Joe · Accepted Answer · 2018-11-20 00:05:55Z

6

Try implicitly setting res to 'any'

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

answered Nov 20, 2018 at 0:05

Joe

1861 gold badge1 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lucho · Accepted Answer · 2018-11-19 23:14:22Z

1

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

edited Nov 19, 2018 at 23:14

answered Nov 19, 2018 at 22:31

Lucho

1,5471 gold badge13 silver badges26 bronze badges

2 Comments

sosick Over a year ago

unfortunately it didn't help.

Lucho Over a year ago

You need to change aswell in your callback to this.photos = data.photos.photo

codearmalik · Accepted Answer · 2018-11-27 07:29:44Z

-2

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

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

answered Nov 27, 2018 at 7:29

codearmalik

256 bronze badges

2 Comments

JoseTurron Over a year ago

Hi, AngularJS is not the same as Angular (or Angular 2+)

codearmalik Over a year ago

They are very different. AnajuarJS can be embedded in any HTML code, cshtml, php, etc. But Angular mainly used as stand-alone frontend application.

Collectives™ on Stack Overflow

Angular - fetch data from API

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related