CODEWITHSUNDEEP
javascriptjsonangular
Jason
Jason

Reputation: 67

display json results with angular

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

Upvotes: 1

Views: 150

Answers (1)

Raed Khalaf
Raed Khalaf

Reputation: 2065

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

Upvotes: 1

Related Questions