Using subscribe function getting cannot read undefined

Question

I am trying to get information from another component that sends HTTP request with youtube API and I get this problem:

Cannot read property 'subscribe' of undefined
at SafeSubscriber._next (profile.page.ts:20)

this the component code, from here I trying to get the information from the service:

  constructor(private db:FirebaseService,private afauth:AuthService) { 
  this.db.getDataObj("/Profile/" + this.uid).subscribe(res =>{
     this.profileInfo= res;
     this.afauth.getYoutubeData(res.channel).subscribe(data =>{
       console.log(data);
  })
})}

this the code of the function of the service that send the http request:

 getYoutubeData(ch):any{
  let m="https://www.googleapis.com/youtube/v3/channels? 
  part=snippet%2CcontentDetails%2Cstatistics&id=" + ch + "&key=" + api ;
  this.http.get(m).subscribe(data =>
  { 
   this.youtubeObj=data.items["0"].statistics;
   return this.youtubeObj;
 })

}

You cannot return data from within subscribe like that, it won’t actually return data. You instead can use RxJS operators such as map() inside of pipe() to pass formatted observable stream data to other methods. — Alexander Staroselsky
– Alexander Staroselsky, Commented Mar 10, 2019 at 20:39

Vadim · Accepted Answer · 2019-03-10 20:57:02Z

1

You need to correct your getYoutubeData method in the service by removing subscription and returning this.http.get. To get data.items["0"].statistics from subscription to getYoutubeData, use pipe & map operators:

import { catchError, map } from 'rxjs/operators';

getYoutubeData(ch): any {
  let m="https://www.googleapis.com/youtube/v3/channels? 
  part=snippet%2CcontentDetails%2Cstatistics&id=" + ch + "&key=" + api;
  return this.http.get(m).pipe(
    map(data => data.items["0"].statistics),
    catchError(err => {
      console.log(err);
    });
  )
}

edited Mar 10, 2019 at 20:57

answered Mar 10, 2019 at 20:44

Vadim

3,4492 gold badges16 silver badges30 bronze badges

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

Comments

joka00 · Accepted Answer · 2019-03-10 20:41:03Z

0

The problem here is that you can't basically return data from subscribe. So the solution here would be just returning an Observable and getting data in the constructor of the component.

.service.ts

 getYoutubeData(ch):any{
  let m="https://www.googleapis.com/youtube/v3/channels? 
  part=snippet%2CcontentDetails%2Cstatistics&id=" + ch + "&key=" + api ;
  return this.http.get(m);
}

*.component.ts

constructor(private db:FirebaseService,private afauth:AuthService) { 
  this.db.getDataObj("/Profile/" + this.uid).subscribe(res =>{
     this.profileInfo= res;
     this.afauth.getYoutubeData(res.channel).subscribe(data =>{
       console.log(data.items["0"].statistics);
  })
})}

answered Mar 10, 2019 at 20:41

joka00

2,5771 gold badge12 silver badges29 bronze badges

Comments

ebeg · Accepted Answer · 2019-03-10 20:44:05Z

0

You already subscribe in getYoutubeData method. You can only subscribe once. In your method please use pipe and tab method like :

getYoutubeData(ch):any{
  let m="https://www.googleapis.com/youtube/v3/channels? 
  part=snippet%2CcontentDetails%2Cstatistics&id=" + ch + "&key=" + api ;
  return this.http.get(m).pipe(tap(data =>
  { 
   this.youtubeObj=data.items["0"].statistics;
   return this.youtubeObj;
 }))
}

edited Mar 10, 2019 at 20:44

answered Mar 10, 2019 at 20:40

ebeg

4281 gold badge4 silver badges20 bronze badges

1 Comment

joka00 Over a year ago

Do you mean tap method?

Collectives™ on Stack Overflow

Using subscribe function getting cannot read undefined

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related