Angular doesn't return the expected value

Question

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.

What is your backend API code?

random
– random

2018-11-10 17:44:00 +00:00
Commented Nov 10, 2018 at 17:44 — random
– random, Commented Nov 10, 2018 at 17:44

SiddAjmera · Accepted Answer · 2018-11-10 18:02:45Z

2

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.

edited Nov 10, 2018 at 18:02

answered Nov 10, 2018 at 17:43

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

tomfl Over a year ago

Thanks for the answer. What if I wanna check the status code inside of the service's method ? Like this : response => { if (response.status === 200) { return true; } else { return false; } } (edit : sorry for the indentation)

tomfl Over a year ago

You are very fast XD. And it worked ! Thank you so much ! I'm not exctly sure what all those methods do, but I can see that I still have a lot to learn ^^

SiddAjmera Over a year ago

@tomfl, I've added the explanation. Hope that helps you understand a bit of what's happening.

tomfl Over a year ago

Thank you very much. Tell me if I'm wrong, but the reason why we are subscribeing to the response (?) in the component (and not the service) is because the response is asynchronous, meaning that the rest of the code is executed and only then the reponse is sent (after it was loaded from the server), right ?

SiddAjmera Over a year ago

Yes. You can say that. Whatever you write inside the subscribe block will get called only once the response is received and then mapped by the service.

Collectives™ on Stack Overflow

Angular doesn't return the expected value

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related