Angular - Why my variable is "undefined" after subscribe to API?

Question

After I call my API service, I have a undefined variable in the template, but I see the expected result in the console.

There is my VideoComponent that called API

export class VideoComponent implements OnInit {
  video: Video = new Video();

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

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.apiService.getOneVideoByID(params['id']).subscribe((video: Video) => {
        this.video = video;
        console.log(this.video);
      });
    });
  }
}

There is my API service:

export class ApiService {
  PHP_API_SERVER = 'http://127.0.0.1/TutoWorld/backend/api';
  private headers;

  constructor(private httpClient: HttpClient) {
    this.headers = new HttpHeaders().set('Content-Type', 'application/json')
  }


  getOneVideoByID(id: number): Observable<Video> {
    return this.httpClient.get<Video>(`${this.PHP_API_SERVER}/readOne?id=${id}`,{headers: this.headers});
  }
}

My template:

<div class="block5"></div>
<div id="videoContainer">
  <p>video title: {{video.titre}}  </p>
</div>

And my Video Model:

export class Video {
  id: number;
  url: string;
  titre: string;
  langue: string;
  description: string;
  date_creation: string;
  date_ajout: string;
  auteur_id: number;
  auteur_nom: string;
}

If someone can help me to solve this issue, would be great.
Thanks

No, it,s when i try to access in the template: <p>video title: {{video.titre}} </p>. in the console.log i see the good result — samy ben
– samy ben, Commented Feb 28, 2020 at 17:55
Hmm... That's strange. What do you see if you do <p>video: {{ video | json }} </p>. And do you see video title: ` present in the view? — AliF50
– AliF50, Commented Feb 28, 2020 at 17:58
Nothing change when adding pipe. There is a screenshot of my page: zupimages.net/up/20/09/6xay.png — samy ben
– samy ben, Commented Feb 28, 2020 at 18:04
I suggest you to transform that definition to an interface instead of a class. You are not using a constructor and interfaces don't get transpiled in javascript. — Jacopo Sciampi
– Jacopo Sciampi, Commented Feb 28, 2020 at 18:45

AliF50 · Accepted Answer · 2020-02-28 18:28:04Z

1

Looking at the console, it seems to be an array.

I would also avoid nested subscribes, try this:

  import { switchMap } from 'rxjs/operators'; // this import could be wrong, double check
.....
  ngOnInit() {
    this.route.params.pipe(
      switchMap(params => this.apiService.getOneVideoByID(params['id'])),
    ).subscribe((video: Video) => {
      this.video = video[0];
      console.log(this.video);
    });
  }

edited Feb 28, 2020 at 18:28

answered Feb 28, 2020 at 18:09

AliF50

19.1k2 gold badges29 silver badges45 bronze badges

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

3 Comments

samy ben Over a year ago

I have this error: TS2339: Property 'subscribe' does not exist on type 'OperatorFunction<unknown, Video>'.

AliF50 Over a year ago

I forgot an ending bracket on the switchmap, check now

samy ben Over a year ago

Great, it's working but i have had an <iframe> in my html and now i have an other error message: zupimages.net/up/20/09/cik2.png. There is my Iframe code: <iframe width="1280" height="720" src="youtube.com/embed{{getVideoID(video.url) | safe}}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

samy ben · Accepted Answer · 2020-02-28 18:57:03Z

Thanks, it's working but i have had an in my html and now i have an other error message: https://zupimages.net/up/20/09/cik2.png

There is my Iframe code:

<iframe width="1280" height="720"
          src="https://www.youtube.com/embed/{{getVideoID(video.url) | safe}}"
          frameborder="0"
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen>
  </iframe>

and my GetVideoID code:

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

  youtube_parser(url) {
    let regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
    let match = url.match(regExp);
    return (match && match[7].length == 11) ? match[7] : false;
  }

The Pipe code too:

import {Pipe, PipeTransform, SecurityContext} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }
  transform(url) {
    return this.sanitizer.sanitize(SecurityContext.URL, url)
  }
}

got 2 : "Cannot read property 'match' of undefined" and "unsafe value used in a resource URL context". You can see it on the screenshot
The first is normal i think: need time time to get url from api but i don't understand the second with Unsafe value
stackoverflow.com/questions/60456881/… Maybe change it to [src] = "url | safe" and assign url to the embedded youtube URL.
Thanks it works but i had to change the return of my SafePipe class too by: "return this.sanitizer.bypassSecurityTrustResourceUrl(url);" and now it's ok. Thx

domingo · Accepted Answer · 2020-02-29 00:32:27Z

0

To answer initial question here, I must say you treating a response from API which is array as a single instance. Thats why you get it undefined :)

answered Feb 29, 2020 at 0:32

domingo

1778 bronze badges

Collectives™ on Stack Overflow

Angular - Why my variable is "undefined" after subscribe to API?

3 Answers 3

3 Comments

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Related