RxJs6 - Static merge an array of observables
I have a list of objects created dynamically by the user. Each object has a click$ observable, I want to merge all this click$ streams in one stream.
I've tried the merge static operator from rxjs import. With the direct references to the stream:
sub = merge(list[0].click$, list[1].click$)
.subscribe(e => {
console.log('My click event', e);
})
all goes as expected.
But when I use an array of click$ in the subscribe next call I received an Observable object and not my click event.
const streams= ;
list.forEach(o => { streams.push(o.click$); });
sub = merge(streams).subscribe(e => {
console.log(e); // e is an observable ???
});
Why? What am I doing wrong?
Here a similar implementation with the same error: https://stackblitz.com/edit/typescript-ohq6rx?file=index.ts&devtoolsheight=100
javascript reactive-programming rxjs6
asked Nov 21 '18 at 15:51
EduBicEduBic
426
add a comment |
I have a list of objects created dynamically by the user. Each object has a click$ observable, I want to merge all this click$ streams in one stream.
I've tried the merge static operator from rxjs import. With the direct references to the stream:
sub = merge(list[0].click$, list[1].click$)
.subscribe(e => {
console.log('My click event', e);
})
all goes as expected.
But when I use an array of click$ in the subscribe next call I received an Observable object and not my click event.
const streams= ;
list.forEach(o => { streams.push(o.click$); });
sub = merge(streams).subscribe(e => {
console.log(e); // e is an observable ???
});
Why? What am I doing wrong?
Here a similar implementation with the same error: https://stackblitz.com/edit/typescript-ohq6rx?file=index.ts&devtoolsheight=100
javascript reactive-programming rxjs6
asked Nov 21 '18 at 15:51
EduBicEduBic
426
add a comment |
I have a list of objects created dynamically by the user. Each object has a click$ observable, I want to merge all this click$ streams in one stream.
I've tried the merge static operator from rxjs import. With the direct references to the stream:
sub = merge(list[0].click$, list[1].click$)
.subscribe(e => {
console.log('My click event', e);
})
all goes as expected.
But when I use an array of click$ in the subscribe next call I received an Observable object and not my click event.
const streams= ;
list.forEach(o => { streams.push(o.click$); });
sub = merge(streams).subscribe(e => {
console.log(e); // e is an observable ???
});
Why? What am I doing wrong?
Here a similar implementation with the same error: https://stackblitz.com/edit/typescript-ohq6rx?file=index.ts&devtoolsheight=100
javascript reactive-programming rxjs6
asked Nov 21 '18 at 15:51
EduBicEduBic
426
I have a list of objects created dynamically by the user. Each object has a click$ observable, I want to merge all this click$ streams in one stream.
I've tried the merge static operator from rxjs import. With the direct references to the stream:
sub = merge(list[0].click$, list[1].click$)
.subscribe(e => {
console.log('My click event', e);
})
all goes as expected.
But when I use an array of click$ in the subscribe next call I received an Observable object and not my click event.
const streams= ;
list.forEach(o => { streams.push(o.click$); });
sub = merge(streams).subscribe(e => {
console.log(e); // e is an observable ???
});
Why? What am I doing wrong?
Here a similar implementation with the same error: https://stackblitz.com/edit/typescript-ohq6rx?file=index.ts&devtoolsheight=100
javascript reactive-programming rxjs6
javascript reactive-programming rxjs6
asked Nov 21 '18 at 15:51
EduBicEduBic
426
asked Nov 21 '18 at 15:51
EduBicEduBic
426
asked Nov 21 '18 at 15:51
EduBicEduBic
426
asked Nov 21 '18 at 15:51
EduBicEduBic
426
asked Nov 21 '18 at 15:51
EduBicEduBic
426
426
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Since it's an array. You can spread an array with the ... operator in JavaScript. If you do this all should work well.
More information can be found at MDN
I added code so you have an idea what I mean. List is the array of objects that have click$ properties. this array is mapped to just the click$ and then spread with the ... operator.
sub = merge(...list.map(item => item.click$)).subscribe(console.log)
answered Nov 21 '18 at 16:07
MurfMurf
667313
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%2f53415802%2frxjs6-static-merge-an-array-of-observables%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
Since it's an array. You can spread an array with the ... operator in JavaScript. If you do this all should work well.
More information can be found at MDN
I added code so you have an idea what I mean. List is the array of objects that have click$ properties. this array is mapped to just the click$ and then spread with the ... operator.
sub = merge(...list.map(item => item.click$)).subscribe(console.log)
answered Nov 21 '18 at 16:07
MurfMurf
667313
add a comment |
Since it's an array. You can spread an array with the ... operator in JavaScript. If you do this all should work well.
More information can be found at MDN
I added code so you have an idea what I mean. List is the array of objects that have click$ properties. this array is mapped to just the click$ and then spread with the ... operator.
sub = merge(...list.map(item => item.click$)).subscribe(console.log)
answered Nov 21 '18 at 16:07
MurfMurf
667313
add a comment |
Since it's an array. You can spread an array with the ... operator in JavaScript. If you do this all should work well.
More information can be found at MDN
I added code so you have an idea what I mean. List is the array of objects that have click$ properties. this array is mapped to just the click$ and then spread with the ... operator.
sub = merge(...list.map(item => item.click$)).subscribe(console.log)
answered Nov 21 '18 at 16:07
MurfMurf
667313
Since it's an array. You can spread an array with the ... operator in JavaScript. If you do this all should work well.
More information can be found at MDN
I added code so you have an idea what I mean. List is the array of objects that have click$ properties. this array is mapped to just the click$ and then spread with the ... operator.
sub = merge(...list.map(item => item.click$)).subscribe(console.log)
answered Nov 21 '18 at 16:07
MurfMurf
667313
edited Nov 21 '18 at 16:13
answered Nov 21 '18 at 16:07
MurfMurf
667313
answered Nov 21 '18 at 16:07
MurfMurf
667313
answered Nov 21 '18 at 16:07
MurfMurf
667313
667313
add a comment |
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%2f53415802%2frxjs6-static-merge-an-array-of-observables%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
