Angular doesn't return the expected value
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.
javascript angular typescript http angular7
add a comment |
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.
javascript angular typescript http angular7
What is your backend API code?
– Aparna
Nov 10 at 17:44
add a comment |
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.
javascript angular typescript http angular7
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.
javascript angular typescript http angular7
javascript angular typescript http angular7
edited Dec 5 at 14:15
Goncalo Peres
1,3091317
1,3091317
asked Nov 10 at 17:41
tomfl
11715
11715
What is your backend API code?
– Aparna
Nov 10 at 17:44
add a comment |
What is your backend API code?
– Aparna
Nov 10 at 17:44
What is your backend API code?
– Aparna
Nov 10 at 17:44
What is your backend API code?
– Aparna
Nov 10 at 17:44
add a comment |
1 Answer
1
active
oldest
votes
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 subscribe
ing 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 observe
d 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.
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
Nov 10 at 17:51
@tomfl, the updated answer should do that,
– SiddAjmera
Nov 10 at 17:52
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 ^^
– tomfl
Nov 10 at 17:57
@tomfl, I've added the explanation. Hope that helps you understand a bit of what's happening.
– SiddAjmera
Nov 10 at 18:03
1
Yes. You can say that. Whatever you write inside thesubscribe
block will get called only once the response is received and thenmap
ped by the service.
– SiddAjmera
Nov 10 at 18:12
|
show 2 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53241693%2fangular-doesnt-return-the-expected-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 subscribe
ing 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 observe
d 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.
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
Nov 10 at 17:51
@tomfl, the updated answer should do that,
– SiddAjmera
Nov 10 at 17:52
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 ^^
– tomfl
Nov 10 at 17:57
@tomfl, I've added the explanation. Hope that helps you understand a bit of what's happening.
– SiddAjmera
Nov 10 at 18:03
1
Yes. You can say that. Whatever you write inside thesubscribe
block will get called only once the response is received and thenmap
ped by the service.
– SiddAjmera
Nov 10 at 18:12
|
show 2 more comments
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 subscribe
ing 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 observe
d 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.
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
Nov 10 at 17:51
@tomfl, the updated answer should do that,
– SiddAjmera
Nov 10 at 17:52
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 ^^
– tomfl
Nov 10 at 17:57
@tomfl, I've added the explanation. Hope that helps you understand a bit of what's happening.
– SiddAjmera
Nov 10 at 18:03
1
Yes. You can say that. Whatever you write inside thesubscribe
block will get called only once the response is received and thenmap
ped by the service.
– SiddAjmera
Nov 10 at 18:12
|
show 2 more comments
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 subscribe
ing 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 observe
d 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.
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 subscribe
ing 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 observe
d 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 at 18:02
answered Nov 10 at 17:43
SiddAjmera
12.3k21137
12.3k21137
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
Nov 10 at 17:51
@tomfl, the updated answer should do that,
– SiddAjmera
Nov 10 at 17:52
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 ^^
– tomfl
Nov 10 at 17:57
@tomfl, I've added the explanation. Hope that helps you understand a bit of what's happening.
– SiddAjmera
Nov 10 at 18:03
1
Yes. You can say that. Whatever you write inside thesubscribe
block will get called only once the response is received and thenmap
ped by the service.
– SiddAjmera
Nov 10 at 18:12
|
show 2 more comments
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
Nov 10 at 17:51
@tomfl, the updated answer should do that,
– SiddAjmera
Nov 10 at 17:52
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 ^^
– tomfl
Nov 10 at 17:57
@tomfl, I've added the explanation. Hope that helps you understand a bit of what's happening.
– SiddAjmera
Nov 10 at 18:03
1
Yes. You can say that. Whatever you write inside thesubscribe
block will get called only once the response is received and thenmap
ped by the service.
– SiddAjmera
Nov 10 at 18:12
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
Nov 10 at 17:51
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
Nov 10 at 17:51
@tomfl, the updated answer should do that,
– SiddAjmera
Nov 10 at 17:52
@tomfl, the updated answer should do that,
– SiddAjmera
Nov 10 at 17:52
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 ^^
– tomfl
Nov 10 at 17:57
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 ^^
– tomfl
Nov 10 at 17:57
@tomfl, I've added the explanation. Hope that helps you understand a bit of what's happening.
– SiddAjmera
Nov 10 at 18:03
@tomfl, I've added the explanation. Hope that helps you understand a bit of what's happening.
– SiddAjmera
Nov 10 at 18:03
1
1
Yes. You can say that. Whatever you write inside the
subscribe
block will get called only once the response is received and then map
ped by the service.– SiddAjmera
Nov 10 at 18:12
Yes. You can say that. Whatever you write inside the
subscribe
block will get called only once the response is received and then map
ped by the service.– SiddAjmera
Nov 10 at 18:12
|
show 2 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53241693%2fangular-doesnt-return-the-expected-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What is your backend API code?
– Aparna
Nov 10 at 17:44