Getting data from OMDB Api using Angular2

Question

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: 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

Please, try to change the this.movies = [result]; to this.movies = result.Search; and lets see what will happening — Diullei
– Diullei, Commented Mar 27, 2017 at 0:08
as I can see on your "print", the result object has a property called Search that is an array with the data you are looking for. You need to pass this value to your movies list. — Diullei
– Diullei, Commented Mar 27, 2017 at 0:15
Your service.get(...) is not returning a Movie object. It's returning an object like: {Search: Movie[]; totalResults: number; Response: boolean}. You need to change this signature. Just to make a quickly check try to use this: this.movies = (<any>result).Search; — Diullei
– Diullei, Commented Mar 27, 2017 at 0:21

Diullei · Accepted Answer · 2017-03-27 00:49:07Z

2

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;

edited Mar 27, 2017 at 0:49

answered Mar 27, 2017 at 0:39

Diullei

12.5k2 gold badges30 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

Getting data from OMDB Api using Angular2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related