CODEWITHSUNDEEP
angulartypescript
Software Ninja
Software Ninja

Reputation: 135

Getting data from OMDB Api using Angular2

Hey guys I am using the OMDB API to get the list of movies. I get the data in the console but I cant loop through it to show it in the UI. It just returns an empty.

export class example {
  movies: Movie[];
  search: string;

  constructor(private service: MovieService) {}

  getMovies(): void {
    this.service.get(this.search).then((result) => {
      this.movies = [result];
      console.log(result)
    });
  }
}

When I console log the data I am getting this: enter image description here in my HTML component I loop through it like this:

<div *ngFor="let movie of movies">
<div>{{movie.Title}}<span>{{movie.Rated}}</span></div>
</div>

But this is not working. It just doesnt do anything.

Can someone help me please? I would really appreciate it.

Thanks

Upvotes: 0

Views: 622

Answers (1)

Diullei
Diullei

Reputation: 12434

Take a look on your MovieService class. The get(...) function needs to return a promise with an "typed" object like:

{
    Search: Movie[]; 
    totalResults: string;
    Response: string;
}

and not a Movie object. The current typing is wrong. To check it, just try to change the line:

this.movies = [result];

to:

this.movies = (<any>result).Search;

Upvotes: 2

Related Questions