Angular 2 Trying to wait until the subscribe finished Before executing code
I am trying to change a variable's content inside the subscribe function
test : string="before";
this.peopleService.fetchRandom()
.subscribe(person => {
this.person = person;
this.test = "after";
});
console.log(this.test);
as you can see the variable in question is test
and it is set to contain "after" inside lambda function.
Right now console log shows "before",
I wonder if there is a way for the code after subscribing to wait until the subscribe finished.
hopefully showing "after" in the console.log.
//this function is in the service
fetchRandom(): Observable<any> {
return this._http.get(this._backendURL.randomPeople);
}
a lot of answers to similar questions use async-await
but in my context, it is not what I need.
angular typescript edited Nov 25 '18 at 10:35
Yashwardhan Pauranik
2,06111529
asked Nov 25 '18 at 10:30
ben aziza oussamaben aziza oussama
11
add a comment |
I am trying to change a variable's content inside the subscribe function
test : string="before";
this.peopleService.fetchRandom()
.subscribe(person => {
this.person = person;
this.test = "after";
});
console.log(this.test);
as you can see the variable in question is test
and it is set to contain "after" inside lambda function.
Right now console log shows "before",
I wonder if there is a way for the code after subscribing to wait until the subscribe finished.
hopefully showing "after" in the console.log.
//this function is in the service
fetchRandom(): Observable<any> {
return this._http.get(this._backendURL.randomPeople);
}
a lot of answers to similar questions use async-await
but in my context, it is not what I need.
angular typescript edited Nov 25 '18 at 10:35
Yashwardhan Pauranik
2,06111529
asked Nov 25 '18 at 10:30
ben aziza oussamaben aziza oussama
11
1
No, there is no way. Put that code inside the callback, and it will execute at the right time, displaying the value you expect; "after".
– JB Nizet
Nov 25 '18 at 10:36
@JBNizet thank you for your answear. yes it is the solution i implemented but it does not feel, well elegent. if i have alot of treatment to do inside or other functions to call etc.. it will inflate the subscribe function.
– ben aziza oussama
Nov 25 '18 at 11:09
Well, put all that code inside a separate method, and call that separate method from inside the callback.
– JB Nizet
Nov 25 '18 at 11:13
add a comment |
I am trying to change a variable's content inside the subscribe function
test : string="before";
this.peopleService.fetchRandom()
.subscribe(person => {
this.person = person;
this.test = "after";
});
console.log(this.test);
as you can see the variable in question is test
and it is set to contain "after" inside lambda function.
Right now console log shows "before",
I wonder if there is a way for the code after subscribing to wait until the subscribe finished.
hopefully showing "after" in the console.log.
//this function is in the service
fetchRandom(): Observable<any> {
return this._http.get(this._backendURL.randomPeople);
}
a lot of answers to similar questions use async-await
but in my context, it is not what I need.
angular typescript edited Nov 25 '18 at 10:35
Yashwardhan Pauranik
2,06111529
asked Nov 25 '18 at 10:30
ben aziza oussamaben aziza oussama
11
I am trying to change a variable's content inside the subscribe function
test : string="before";
this.peopleService.fetchRandom()
.subscribe(person => {
this.person = person;
this.test = "after";
});
console.log(this.test);
as you can see the variable in question is test
and it is set to contain "after" inside lambda function.
Right now console log shows "before",
I wonder if there is a way for the code after subscribing to wait until the subscribe finished.
hopefully showing "after" in the console.log.
//this function is in the service
fetchRandom(): Observable<any> {
return this._http.get(this._backendURL.randomPeople);
}
a lot of answers to similar questions use async-await
but in my context, it is not what I need.
angular typescript angular typescript edited Nov 25 '18 at 10:35
Yashwardhan Pauranik
2,06111529
asked Nov 25 '18 at 10:30
ben aziza oussamaben aziza oussama
11
edited Nov 25 '18 at 10:35
Yashwardhan Pauranik
2,06111529
asked Nov 25 '18 at 10:30
ben aziza oussamaben aziza oussama
11
edited Nov 25 '18 at 10:35
Yashwardhan Pauranik
2,06111529
edited Nov 25 '18 at 10:35
Yashwardhan Pauranik
2,06111529
edited Nov 25 '18 at 10:35
Yashwardhan Pauranik
2,06111529
2,06111529
asked Nov 25 '18 at 10:30
ben aziza oussamaben aziza oussama
11
asked Nov 25 '18 at 10:30
ben aziza oussamaben aziza oussama
11
asked Nov 25 '18 at 10:30
ben aziza oussamaben aziza oussama
11
11
1
No, there is no way. Put that code inside the callback, and it will execute at the right time, displaying the value you expect; "after".
– JB Nizet
Nov 25 '18 at 10:36
@JBNizet thank you for your answear. yes it is the solution i implemented but it does not feel, well elegent. if i have alot of treatment to do inside or other functions to call etc.. it will inflate the subscribe function.
– ben aziza oussama
Nov 25 '18 at 11:09
Well, put all that code inside a separate method, and call that separate method from inside the callback.
– JB Nizet
Nov 25 '18 at 11:13
add a comment |
1
No, there is no way. Put that code inside the callback, and it will execute at the right time, displaying the value you expect; "after".
– JB Nizet
Nov 25 '18 at 10:36
@JBNizet thank you for your answear. yes it is the solution i implemented but it does not feel, well elegent. if i have alot of treatment to do inside or other functions to call etc.. it will inflate the subscribe function.
– ben aziza oussama
Nov 25 '18 at 11:09
Well, put all that code inside a separate method, and call that separate method from inside the callback.
– JB Nizet
Nov 25 '18 at 11:13
1
1
No, there is no way. Put that code inside the callback, and it will execute at the right time, displaying the value you expect; "after".
– JB Nizet
Nov 25 '18 at 10:36
No, there is no way. Put that code inside the callback, and it will execute at the right time, displaying the value you expect; "after".
– JB Nizet
Nov 25 '18 at 10:36
@JBNizet thank you for your answear. yes it is the solution i implemented but it does not feel, well elegent. if i have alot of treatment to do inside or other functions to call etc.. it will inflate the subscribe function.
– ben aziza oussama
Nov 25 '18 at 11:09
@JBNizet thank you for your answear. yes it is the solution i implemented but it does not feel, well elegent. if i have alot of treatment to do inside or other functions to call etc.. it will inflate the subscribe function.
– ben aziza oussama
Nov 25 '18 at 11:09
Well, put all that code inside a separate method, and call that separate method from inside the callback.
– JB Nizet
Nov 25 '18 at 11:13
Well, put all that code inside a separate method, and call that separate method from inside the callback.
– JB Nizet
Nov 25 '18 at 11:13
add a comment |
1 Answer
1
active
oldest
votes
The problem is to do with timing, the console log with the wrong result is being called from outside the subscription and is executing before the value has been updated. You could call a function after the value has been changed to log the correct result.
This is because the function will only be called within the subscription after the your test variable has been updated.
Example below.
public test ='before';
this.peopleService.fetchRandom()
.subscribe(person => {
this.person = person;
this.test = 'after';
this.laterFunction();
});
public laterFunction: void
{
console.log(this.test) // expected 'after'
}
When using Angular I found that opening subscriptions worked well in the OnInit life-cycle hook and then using the variables in separate functions called from within the subscription, just be cautious subscriptions stay open so if more data comes through the subscription 'stream' the functions will be called again. Depends on use case.
answered Nov 25 '18 at 11:32
dince12dince12
1,0521621
thank you for your response but what i am looking for is a way to wait until the subscribe is done and then manipulate the data and execute my code i already used something similar to your solution but i am not satisfied with it
– ben aziza oussama
Nov 25 '18 at 12:25
think you may be expecting the wrong behaviour from subscriptions, the idea is they stay open, so any changes or new data also come through the subscription. If you find your answer please post.
– dince12
Dec 1 '18 at 8:55
add a comment |
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%2f53466605%2fangular-2-trying-to-wait-until-the-subscribe-finished-before-executing-code%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
The problem is to do with timing, the console log with the wrong result is being called from outside the subscription and is executing before the value has been updated. You could call a function after the value has been changed to log the correct result.
This is because the function will only be called within the subscription after the your test variable has been updated.
Example below.
public test ='before';
this.peopleService.fetchRandom()
.subscribe(person => {
this.person = person;
this.test = 'after';
this.laterFunction();
});
public laterFunction: void
{
console.log(this.test) // expected 'after'
}
When using Angular I found that opening subscriptions worked well in the OnInit life-cycle hook and then using the variables in separate functions called from within the subscription, just be cautious subscriptions stay open so if more data comes through the subscription 'stream' the functions will be called again. Depends on use case.
answered Nov 25 '18 at 11:32
dince12dince12
1,0521621
thank you for your response but what i am looking for is a way to wait until the subscribe is done and then manipulate the data and execute my code i already used something similar to your solution but i am not satisfied with it
– ben aziza oussama
Nov 25 '18 at 12:25
think you may be expecting the wrong behaviour from subscriptions, the idea is they stay open, so any changes or new data also come through the subscription. If you find your answer please post.
– dince12
Dec 1 '18 at 8:55
add a comment |
The problem is to do with timing, the console log with the wrong result is being called from outside the subscription and is executing before the value has been updated. You could call a function after the value has been changed to log the correct result.
This is because the function will only be called within the subscription after the your test variable has been updated.
Example below.
public test ='before';
this.peopleService.fetchRandom()
.subscribe(person => {
this.person = person;
this.test = 'after';
this.laterFunction();
});
public laterFunction: void
{
console.log(this.test) // expected 'after'
}
When using Angular I found that opening subscriptions worked well in the OnInit life-cycle hook and then using the variables in separate functions called from within the subscription, just be cautious subscriptions stay open so if more data comes through the subscription 'stream' the functions will be called again. Depends on use case.
answered Nov 25 '18 at 11:32
dince12dince12
1,0521621
thank you for your response but what i am looking for is a way to wait until the subscribe is done and then manipulate the data and execute my code i already used something similar to your solution but i am not satisfied with it
– ben aziza oussama
Nov 25 '18 at 12:25
think you may be expecting the wrong behaviour from subscriptions, the idea is they stay open, so any changes or new data also come through the subscription. If you find your answer please post.
– dince12
Dec 1 '18 at 8:55
add a comment |
The problem is to do with timing, the console log with the wrong result is being called from outside the subscription and is executing before the value has been updated. You could call a function after the value has been changed to log the correct result.
This is because the function will only be called within the subscription after the your test variable has been updated.
Example below.
public test ='before';
this.peopleService.fetchRandom()
.subscribe(person => {
this.person = person;
this.test = 'after';
this.laterFunction();
});
public laterFunction: void
{
console.log(this.test) // expected 'after'
}
When using Angular I found that opening subscriptions worked well in the OnInit life-cycle hook and then using the variables in separate functions called from within the subscription, just be cautious subscriptions stay open so if more data comes through the subscription 'stream' the functions will be called again. Depends on use case.
answered Nov 25 '18 at 11:32
dince12dince12
1,0521621
The problem is to do with timing, the console log with the wrong result is being called from outside the subscription and is executing before the value has been updated. You could call a function after the value has been changed to log the correct result.
This is because the function will only be called within the subscription after the your test variable has been updated.
Example below.
public test ='before';
this.peopleService.fetchRandom()
.subscribe(person => {
this.person = person;
this.test = 'after';
this.laterFunction();
});
public laterFunction: void
{
console.log(this.test) // expected 'after'
}
When using Angular I found that opening subscriptions worked well in the OnInit life-cycle hook and then using the variables in separate functions called from within the subscription, just be cautious subscriptions stay open so if more data comes through the subscription 'stream' the functions will be called again. Depends on use case.
answered Nov 25 '18 at 11:32
dince12dince12
1,0521621
answered Nov 25 '18 at 11:32
dince12dince12
1,0521621
answered Nov 25 '18 at 11:32
dince12dince12
1,0521621
answered Nov 25 '18 at 11:32
dince12dince12
1,0521621
1,0521621
thank you for your response but what i am looking for is a way to wait until the subscribe is done and then manipulate the data and execute my code i already used something similar to your solution but i am not satisfied with it
– ben aziza oussama
Nov 25 '18 at 12:25
think you may be expecting the wrong behaviour from subscriptions, the idea is they stay open, so any changes or new data also come through the subscription. If you find your answer please post.
– dince12
Dec 1 '18 at 8:55
add a comment |
thank you for your response but what i am looking for is a way to wait until the subscribe is done and then manipulate the data and execute my code i already used something similar to your solution but i am not satisfied with it
– ben aziza oussama
Nov 25 '18 at 12:25
think you may be expecting the wrong behaviour from subscriptions, the idea is they stay open, so any changes or new data also come through the subscription. If you find your answer please post.
– dince12
Dec 1 '18 at 8:55
thank you for your response but what i am looking for is a way to wait until the subscribe is done and then manipulate the data and execute my code i already used something similar to your solution but i am not satisfied with it
– ben aziza oussama
Nov 25 '18 at 12:25
thank you for your response but what i am looking for is a way to wait until the subscribe is done and then manipulate the data and execute my code i already used something similar to your solution but i am not satisfied with it
– ben aziza oussama
Nov 25 '18 at 12:25
think you may be expecting the wrong behaviour from subscriptions, the idea is they stay open, so any changes or new data also come through the subscription. If you find your answer please post.
– dince12
Dec 1 '18 at 8:55
think you may be expecting the wrong behaviour from subscriptions, the idea is they stay open, so any changes or new data also come through the subscription. If you find your answer please post.
– dince12
Dec 1 '18 at 8:55
add a comment |
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.
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%2f53466605%2fangular-2-trying-to-wait-until-the-subscribe-finished-before-executing-code%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
1
No, there is no way. Put that code inside the callback, and it will execute at the right time, displaying the value you expect; "after".
– JB Nizet
Nov 25 '18 at 10:36
@JBNizet thank you for your answear. yes it is the solution i implemented but it does not feel, well elegent. if i have alot of treatment to do inside or other functions to call etc.. it will inflate the subscribe function.
– ben aziza oussama
Nov 25 '18 at 11:09
Well, put all that code inside a separate method, and call that separate method from inside the callback.
– JB Nizet
Nov 25 '18 at 11:13