Observable does not returns api response

Question

I am new in angular. My Project is in angular5 and I am using a web API created in PHP. My WebApi gives response in postman but not from angular. I am using HttpClient to post request

    export class GalleryComponent implements OnInit {
      private apiUrl = 'http://localhost:8080/fullpath';
      private response;
      private data=[];

      constructor(private http: HttpClient) {
        this.response =this.getCategory();
      }

      getCategory (): Observable<any> {
        return this.http.post(this.apiUrl,{});
      }

      ngOnInit() {
       console.log(this.response);
      }
  }

My console Returns enter image description here

What I have to do to get proper response from API?

Try this: `return this.http.post(this.apiUrl,{}).subscribe()` in `getCategory` method — Hasan Fathi, May 21 '18 at 12:45

score 0 · Answer 1 · answered May 21 '18 at 12:53

0

you can try this solution

 ngOnInit() {
   this.getCategory().subscribe(response => {
       console.log(response);
    }, err => {
       console.log(err);
    });
}

answered May 21 '18 at 12:53

Krishna Rathore

9,389
5
24
48

score 0 · Answer 2 · answered May 21 '18 at 12:56

0

You need to subscribe to an Observable to consume it.

Instead of this

private http: HttpClient) {
    this.response =this.getCategory();
}

Try this

private http: HttpClient) {
    this.getCategory().subscribe(result => this.responce = result);
}

answered May 21 '18 at 12:56

Sanjay

11
3

Failed to load http://localhost:8080/fullpath: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. – Raman May 21 '18 at 13:04
Any Help please – Raman May 21 '18 at 13:04
For that, you need to set CORS domain in server PHP! – Chiien May 21 '18 at 13:06

Patricio Vargas · Accepted Answer · 2018-05-21T13:17:59.010

When using Observables, you have to subscribe to them. The actual user of the observable needs to subscribe(), because without subscribe() the observable won't be executed at all.

subscribe() returns a Subscription that can not be subscribed to, but it can be used to cancel the subscription.

 getCategory (): Observable<any> {
      return this.http.post(this.apiUrl,{}).subscribe(
         //Do whatever
        (res)=> console.log(res), 
        (error)=> console.log(error)
      );
    }

For more information you can go to the Angular documentation for Observables: https://angular.io/guide/observables.

Also, remember that most of the subscriptions terminate by themselves, but is always good practice to terminate them using ngOnDestroy(); to avoid memory leaks.

How to use ngDestroy()? In you component.ts file Make sure you have the import

import { Component, OnDestroy, OnInit } from '@angular/core';
export class YourComponent implements OnInit, OnDestroy {
 .
 .
 .
 ngOnDestroy() {
   this.response.unsubscribe();
  }
}

Now, related to your CORS Problem, reference the question that has been asked on stackoverflow before: Response to preflight request doesn't pass access control check

Great! How to use ngOnDestroy() ? Just set in component? Thanks! — Chiien, May 21 '18 at 13:11
@Raman remember that for some http request (depending on the server) the server has to be hosting a .json file. e.g `https://mypage.com/data.json` — Patricio Vargas, May 21 '18 at 16:15

score 0 · Answer 4 · answered May 21 '18 at 13:03

Great! You can try that

this.getCategory().subscribe(
    response => console.log(response),
    err => console.log(err)
);

But the best way to use that, you need to create service for POST Request, and you just call him im component. Like that

getCategory(data: any): Observable<any> {
 return this._http.post(`url`, JSON.stringify(data))
}

And use that in component

this.categoryService.getCategory(data).subscribe(
 data => console.log(data),
 err => console.log(err)
)

And you can use Google DevTools to see if is worked the request, and see the request Response! In network! If problem is CORS, you need to set CORS domain in your server! Try that and tell me if worked! Hope that helps! Thanks

Observable does not returns api response

4 Answers4