'subscribe' is undefined when calling Service Function

Question

I checked all the other Posts here with a similar Problem but I was not able to find a fitting solution.

I went to the Angular Docs to follow this post https://angular.io/tutorial/toh-pt4 and while I did all like described in there I get the error TypeError: Cannot read property 'subscribe' of undefined

posts.service.ts

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
var Prismic = require('prismic-javascript');

const apiEndpoint = "https://hehypfgdgees3124312424heetyh.edn.prismic.io/api/v2"

@Injectable({
  providedIn: 'root'
})
export class PostsService {

  constructor() { }

  getPosts(): Observable<[]> {
    Prismic.getApi(apiEndpoint).then(api => {
      return of(api.query(""));
    })

    return
  }
}

and my Component landingpage.component.ts

import { Component, OnInit } from '@angular/core';
import { PostPreview } from '../../types/PostPreview';
import { PostsService } from '../../services/posts.service';
import { Observable } from 'rxjs'

@Component({
  selector: 'app-landingpage',
  templateUrl: './landingpage.component.html',
  styleUrls: ['./landingpage.component.scss']
})
export class LandingpageComponent implements OnInit {
examplePreview: PostPreview
exampleNewsfeed: Array<{}>

  constructor(private postService: PostsService) { }

  ngOnInit() {
    this.examplePreview = {
      titel: 'Hello',
      subtitel: 'Subtitel',
      backgroundImageUrl: 'https://www.welt.de/img/politik/deutschland/mobile191563833/0437936357-coriginal-w780/Forderungen-von-Fridays-For-Future-vorgestellt-3.jpg',
      abgedunkelt: true
    };

    this.postService.getPosts().subscribe(posts => this.exampleNewsfeed = posts);
  }

}

My goal is to get the results of that API call into my component when subscribing tot he function. Thanks in advance.

You aren't returning anything in your `getPosts` function. You have to return the value: `return Prismic.getApi...` — John Montgomery, Apr 11 '19 at 19:44
If your `Prismic` service really returns a `Promise` just return it to the component and call `then` there. — The Head Rush, Apr 11 '19 at 19:48
Possible duplicate of [What does "return" do in Javascript?](https://stackoverflow.com/questions/44474975/what-does-return-do-in-javascript) — baao, Apr 11 '19 at 19:49

Pranav C Balan · Accepted Answer · 2019-04-12T18:15:26.013

0

In your service, there is just return statement without any value so it would be undefined, so create an Observable and return.

import { Observable } from "rxjs/Observable"

// remaining codes


getPosts(): Observable<any> {  
  const simpleObservable = new Observable((observer) => {
    return Prismic.getApi(apiEndpoint).then(api => {
       api.query("").then(response => {  
          observer.next(response);
          observer.complete();
       })           
    })
  });
  return simpleObservable;
}

edited Apr 12 '19 at 18:15

answered Apr 11 '19 at 19:42

Pranav C Balan

113,687
23
165
188

I just cant get it to work it always returns undefined... (the posts inside the subscribe in component) – niclas_4 Apr 12 '19 at 18:11
@Badgy : what `api.query("")` returns? – Pranav C Balan Apr 12 '19 at 18:12
Not exactly sure i think its just for the function to work, if i just use this function in the component: ` Prismic.api(apiEndpoint).then(api => { return api.query(""); }).then(response => { console.log(response) })` the response is the one i need but I wanna integrate it into my service but cant get it to work – niclas_4 Apr 12 '19 at 18:13
thanks, since I also wanna learn can you recommend any specific guide about the topics needed above to understand it better? – niclas_4 Apr 12 '19 at 19:10
@Badgy : both `getApi()` and `query()` returns a `Promise` so you can even do it without using an Observable – Pranav C Balan Apr 12 '19 at 19:12

score 0 · Answer 2 · answered Apr 11 '19 at 19:48

This is because your getPosts method returns before the result of the then is returned.

getPosts(): Observable<[]> {
  Prismic.getApi(apiEndpoint).then(api => {
    return of(api.query(""));
  })

  return // <-- This
}

Since it looks like the result of the getApi method is a promise, one way is to await the result (roughly like this):

async getPosts(): Observable<[]> {
  const api: YourType = await Prismic.getApi(apiEndpoint);

  // if your api.query method returns an Observable already
  return api.query("");
  // -- OR --
  // Your 'of' return
  return of(api.query(""));
}

'subscribe' is undefined when calling Service Function

2 Answers2