CODEWITHSUNDEEP
angular
samy ben
samy ben

Reputation: 155

Angular - Data from array not displaying in Template

someone can explain me, why I have no result on the line:

<p>{{video?.themes[0].nom}}</p>

The template stay empty on that line with no error. I have no problem to read all other values.
Here a screenshot: https://zupimages.net/up/20/10/d20g.png

My Template:

<div class="block5"></div>
<div id="videoContainer">
  <h3>{{video?.titre }}  </h3>
  <p>{{video?.themes[0].nom}}</p>
  <h4 class="pl-4">by <a routerLink="/author/{{video?.auteur_id}}" class="authorLink">{{video?.auteur_nom}}</a></h4>
  <div class="embedresize">
    <div>
      <iframe id="iframe"
              [src]="url | safe"
              frameborder="0"
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen>
      </iframe>
    </div>
  </div>
  <p *ngFor="let theme of video?.themes">
    <span>{{theme.nom}}</span>
  </p>
</div>

My Component:

export class VideoComponent implements OnInit {
  video: Video;
  url;

  constructor(private apiService: ApiService, private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.route.params.pipe(
      switchMap(params => this.apiService.getOneVideoByID(params['id'])),
    ).subscribe((video: Video) => {
      this.video = video;
      this.url = "https://www.youtube.com/embed/" + this.getVideoID(this.video.url);
      console.log(this.video);
    });
  }

  getVideoID(url: string) {
    return this.apiService.getYoutubeVideoID(url);
  }
}

Upvotes: 0

Views: 276

Answers (2)

Philipp Meissner
Philipp Meissner

Reputation: 5482

As your console.log(this.video) output in the screenshot suggests the property themes is of type string[], thus does not include a property called nom.

Just display it like so:

<p>{{video?.themes[0]}}</p>

Upvotes: 1

Friso Hoekstra
Friso Hoekstra

Reputation: 885

The themes property on the object in your console is a string Array. Try <p>{{video?.themes[0]}}</p>

Upvotes: 1

Related Questions