CODEWITHSUNDEEP
javascriptangularangular2-http
Sa Hagin
Sa Hagin

Reputation: 532

Angular 2 Http get not triggering

As said in the title, nothing is happening when I subscribe to my observable. There is no error in the console or during the build. Here is my code :

My service

  getBlueCollars(): Observable<BlueCollar[]> {
return this.http.get(this.defaultAPIURL + 'bluecollar?limit=25').map(
  (res: Response) => {
    return res.json();
  });
}

My component

ngOnInit() {
    this.planifRequestService.getBlueCollars().subscribe(
      data => {
        this.blueCollars = data;
        console.log('Inner Blue Collars', this.blueCollars);
      },
      err => console.log(err)
    );
    console.log('Value BlueCollars : ', this.blueCollars);
}

So the second console.log is triggering with "Value BlueCollars : Undefined", and the log in my subscribe is never showed. As well, I can't see the request sent in the Networt tab of Chrome.

So I tried to simplify everything with the following code : 

let response: any;
this.http.get('myUrl').subscribe(data => response = data);
console.log('TestRep: ', response);

Same problem here, no error, response is undefined. It seems the subscribe is not triggering the observable. (The URL is correct, it is working on my swagger or with postman.)

I'm on Angular 2.4.9

Edit

So I tried to copy/past the code of my request on a brand new project, everything is working fine. The request is triggered and I can get the JSON response correctly. So there is something maybe on the configuration of my project that is forbiding the request to trigger correctly.

Upvotes: 3

Views: 1879

Answers (3)

Sa Hagin
Sa Hagin

Reputation: 532

Ok just found what was going on. I am using a fake backend in order to try my login connexions that is supposed to catch only specified URL. However for wathever raison it was catching all the requests, so that explain everything. Thx for your help everybody.

Upvotes: 2

AryanJ-NYC
AryanJ-NYC

Reputation: 2667

Try adding a catch block to your service code:

getBlueCollars(): Observable<BlueCollar[]> {
  return this.http.get(this.defaultAPIURL + 'bluecollar?limit=25')
  .map(
    (res: Response) => {
      return res.json();
    })
  .catch(err => Observable.throw(err))
}

Don't forget to

import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';`

I imagine this will result in the error that'll give you an idea where your code is going wrong.

Upvotes: 1

danimal
danimal

Reputation: 1697

The reason the console.log outside the subscribe call is undefined is because the subscribe/http call is happening asynchronously and so, in effect, the order (in time!) the code is running is:

1) the observable is subscribed to (and then waits for a response) 2) the outer console log runs with blueCollars undefined 3) when the response (or error) comes back from the http request (potentially after several seconds), only then will the inner assignment of this.blueCollar = data happen (and the inner console log), OR an error will get logged

Apart from that the subscribe code looks fine...!

Upvotes: 0

Related Questions