Get inner object from array

Question

I have a component called MovieSearchComponent. This imports a service MovieSearchService and a model Movie.

@Component({
  selector: 'movie_search',
  templateUrl: './movie_search-component.html',
  providers: [MovieSearchService]
})

export class MovieSearchComponent{
  movies: Movie[] = [];

  constructor(private movieSearchService: MovieSearchService){};

  ngOnInit(){
    this.getMovies();
  }

  getMovies(){
    this.movieSearchService.getMovies()
      .subscribe((response)=>{
        this.movies = response;
        console.log(this.movies)
      });
  }
}

The service.

import {Movie} from "../movie";

@Injectable()
export class MovieSearchService{

  private results = {};
  private api = '***7039633f2065942cd8a28d7cadad4';
  private  url = 'https://api.themoviedb.org/3/search/movie?api_key=' + this.api + '&language=en-US&query=Batman&page=1&include_adult=false;';

  constructor(private  http: Http){}

  getMovies(): Observable<Movie[]>{
    return this.http.get(this.url)
      .map(res => res.json())
  }
}

The template:

<div>
  <ul>
    <li *ngFor="let movie of movies.results">
      {{ movie.title }}
    </li>
  </ul>
</div>

This does show all the titles from the movies that are returned from the service. But I have to select the result array which has all the movie objects in the template, which doesn't look right to me.

When I change the console.log(this.movies) to console.log(this.movies.results) in the MovieSearchComponent I get the error property 'results' does not exist on type Movie[].

This is the movie model:

export class Movie{
  constructor(
    public id: number,
    public title: string,
  ){}
}

So why can't I use console.log(this.movies.results) when I can use it in the template.

@AJT_82 To what end? How would that help with the problem? What class? Do you mean I should use an interface instead of the Movie model? — Peter Boomsma
– Peter Boomsma, Commented Jun 25, 2017 at 18:22
@AJT_82 why would you use interfaces to model your business domain? Interfaces represent contract, why would you wanna make Movie a contract? — Trash Can
– Trash Can, Commented Jun 25, 2017 at 19:28
@AJT_82 you are free to express your opinion, but don't forget to take into account relevancy and correctness — Trash Can
– Trash Can, Commented Jun 25, 2017 at 19:54
@Dummy Well I thought it was relevant to present this other option (opinion ?) to the code, and also to point out that the intialization of the objects to class is missing. Maybe sounded blunt, wasn't my intention though. Better delete them so that I'm not offending anyone :D — AVJT82
– AVJT82, Commented Jun 25, 2017 at 20:00

Omri L · Accepted Answer · 2017-06-25 18:11:32Z

1

Because results is not defined in Movie Class.

Change your getMovies method to:

 getMovies(): Observable<Movie[]>{
    return this.http.get(this.url)
      .map(res => res.json().results)
  }

answered Jun 25, 2017 at 18:11

Omri L

7694 silver badges12 bronze badges

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

1 Comment

Peter Boomsma Over a year ago

Now the getMovies function in the service returns the .results array from the json response?

Collectives™ on Stack Overflow

Get inner object from array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related