Myujth

I'm a bit new to Angular (7). I'm trying to retrieve the status code when I do an HTTP request. Here's the code I use in a service :

checkIfSymbolExists() 
 return this.http.get(this.url, observe: 'response' )
 .subscribe(response => 
 return response.status;
 );
 

And I use the returned value in a method in one of my components like this :

onSubmit() 
 console.log(this.stocks.checkIfSymbolExists());

I was expecting a number to be returned, but instead I have an object :

Subscriber closed: false, _parent: null, _parents: null, _subscriptions: Array(1), syncErrorValue: null, …
closed: true
destination: SafeSubscriber closed: true, _parent: null, _parents: null, _subscriptions: null, syncErrorValue: null, …
isStopped: true
syncErrorThrowable: true
syncErrorThrown: false
syncErrorValue: null
_parent: null
_parentSubscription: null
_parents: null
_subscriptions: null
__proto__: Subscription

When, instead of simply returning response.status I do a console.log of it, I do get the 200 status code as expected (a number, and not an object).

Any ideas why it's not the same behavior when returning the value of response.status as shown here ? Thanks.

You're doing it the wrong way. Here's the correct way of doing this:

First you return a mapped response from http.get instead of subscribeing from there. So you'll need to use .pipe(map(...)) instead of subscribe:

import map from 'rxjs/operators';
...
checkIfSymbolExists() 
 return this.http.get(this.url, observe: 'response' )
 .pipe(
 map(res => (res.status === 200))
 );

And then you return the observable from checkIfSymbolExists and then subscribe to it in the onSubmit method:

onSubmit() 
 this.stocks.checkIfSymbolExists()
 .subscribe(res => console.log(res));
 // This should print true if status is 200. false instead.

Explaination:

The responsibility of your service method checkIfSymbolExists() is to give the Component what it wants. So basically your Component doesn't need to know where exactly is your service getting this data from. It just needs to get a boolean on subscribing to the Observable returned by checkIfSymbolExists()

Now the checkIfSymbolExists() method gets response and you've also added an option to observe the complete response. map is just an Rxjs operator that will transform the response. Inside map what we're doing is checking for res.status which we will get because we have observed the response by doing observe: 'response'

Now the map will return whatever is returned by the comparison operator === which will return true if status is 200 and false otherwise.

Hope this gives you a better understanding.