CODEWITHSUNDEEP
javascriptionic-frameworkserviceangular7ionic4
user9846301
user9846301

Reputation:

ERROR TypeError: subscribe is not a function in Ionic 4

I am doing with Ionic News App. I have one problem with getting a response from the service file.

home.page.ts

getNews(): void {
       this.loading = true;
       this.language = localStorage.language;
       this.checkForToken();
       var userId = this.loggedInUser;
       this._newsService.getAllNews().subscribe(
           (res: any) => {
               console.log("all news==========>", res)
               this.loadNewsToPage(res, userId);
           },
           (err) => {
               this.loading = false;
               this.error = err;
           });
   }

news.service.ts

getAllNews(){
        if(this.network.type == 'none' ){
            console.log(JSON.parse(localStorage.getItem("newsArray")));
            this.newsArray = JSON.parse(localStorage.getItem("newsArray"))
            return this.newsArray;
        }else{    
            return this.http.get(config.baseApiUrl + 'news?isApproved=APPROVED').pipe(
                map((res) => {
                    this.newsArray = res['data'];
                    localStorage.setItem('newsArray',JSON.stringify(this.newsArray))
                    return this.newsArray;
                }),
                catchError(this.handleError));
        }
    }

Now the problem is when the network is 'none' it goes in 'if' condition in service file and return response from local storage. But it gives me below error when network is none.

ERROR TypeError: this._newsService.getAllNews(...).subscribe is not a function

It works properly when it goes in else condition or when a network is present. Why like this?

Upvotes: 0

Views: 816

Answers (1)

Tomas Vancoillie
Tomas Vancoillie

Reputation: 3868

Your getAllNews function isn't an Observable. So you can't subscribe to it. See the example below where you return an Observable for the first if condition and the second else condition. You need to close the Observable with observer.complete() after each next function.

getAllNews(): Observable<any>{
  return new Observable(observer => {
    if(this.network.type == 'none' ){
      console.log(JSON.parse(localStorage.getItem("newsArray")));
        this.newsArray = JSON.parse(localStorage.getItem("newsArray"))
        observer.next(this.newsArray);
        observer.complete();
    } else{    
      this.http.get(config.baseApiUrl + 'news?isApproved=APPROVED').subscribe(
        (result: object) => {
          this.newsArray = result['data'];
          localStorage.setItem('newsArray',JSON.stringify(this.newsArray))
          observer.next(this.newsArray);
          observer.complete();
        },
        (error) => {
          observer.error(error);
        });
      }
  });
 }

You can now access the next block in your subscribe > result and the error block in subscribing> error.

this._newsService.getAllNews().subscribe(
  (res: any) => { // observer.next() brings you here
    console.log("all news==========>", res)
    this.loadNewsToPage(res, userId);
  },
  (err) => { // observer.error() brings you here
    this.loading = false;
    this.error = err;
  });

Upvotes: 1

Related Questions