1

I'm trying get some json data from a web api. So far Ive gotten the response from the api, Now i'm trying to target a value and insert that value at the end of the youtube link.

movie.component.html

<div *ngIf="movie">
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">{{movie.title}}</h3>
    </div>
    <div class="panel-body" >
        <div class="row">
            <div class="col-md-7">
                <img class="thumbnail" src="http://image.tmdb.org/t/p/w500/{{movie.poster_path}}">
            </div>
            <div class="col-md-5">
                <ul class="list-group">
                    <li class="list-group-item">Genres:<span *ngFor="let genre of movie.genres"> {{genre.name}}</span></li>
                    <li class="list-group-rel">Release Date: {{movie.release_date | date}}</li>
                </ul>
                <p>{{movie.overview}}</p>
                <br>
                **<div *ngIf="videos">
                 <div *ngFor="let video of videos">
                 <iframe width="360" height="215" src="https://www.youtube.com/embed/{{video.key}}" frameborder="0" allowfullscreen></iframe>**
                </div>
                </div>
                <h4>Rating</h4>
                <p>{{movie.vote_average}} / 10</p>
                <a *ngIf="movie.homepage" href="{{movie.homepage}}" target="_blank" class="btn btn-default">Visit Movie Website</a>
            </div>
        </div>
    </div>
</div>
</div>

-----------------
movie.component.ts

export class MovieComponent implements OnInit {


movie:Object;
videos: Object;

constructor(private router:ActivatedRoute, private _movieService:MovieService) 
{ 

}

ngOnInit() {

this.router.params.subscribe((params) =>{
    let id = params['id'];
    this._movieService.getMovie(id).subscribe(movie =>{
        this.movie = movie;
  });
});
   this.router.params.subscribe((params) =>{
  let id = params['id'];
  this._movieService.getTrailer(id).subscribe(videos =>{
    this.videos = videos;
    });
});
}

}

this is the response from Api, I'm trying to target the "key" value and insert it at the end of the youtube link this is the response from Api, I'm trying to target the "key" value and insert it at the end of the youtube link

but i get this error but i get this error

Improve this question
5
  • how you are assigning videos in ts file? Commented Aug 9, 2017 at 1:09
  • 1
    post your code in the question Commented Aug 9, 2017 at 1:16
  • videos: Object; Commented Aug 9, 2017 at 1:17
  • Post your JSON and the relevant typescript code. Commented Aug 9, 2017 at 1:37
  • i posted some of the ts file if that helps Commented Aug 9, 2017 at 2:08

1 Answer 1

Reset to default
1

the problem here that your are using *ngFor for an Object.

*ngFor: is used to iterate arrays.

now the response you have is an object, inside this object you have an array result i believe this is the array you want to iterate.

you just need to change the *ngFor in your template.

...
 <div *ngFor="let video of videos.results">
...
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

thanks,I have a question about the arrays. I notice that there are two arrays for this result. How can I iterate only the first array? I tried to do video[0].key but that isn't working
I had to add a bypassSecurityTrustResourceUrl.... but the video still doesn't show

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.