Merge two observables, single output
up vote
0
down vote
favorite
Hello guys Im trying to grasp RxJS lib and the whole idea of reactive programming.
Im trying to merge two observables into one. First observable contains array of objects DefectImages
the second observable contains array of strings, which then I convert to array of DefectImages
. After that I would like to merge these two observables into one.
Below my code:
const observable = CachedPhotosBuffer.getInstance().asObservable()
.pipe(
switchMap(data => {
return data.map((url) => DefectImage.createTempImage(url, 'you', Date.now()));
})
);
this.observable = Observable.create(observer => observer.next(this.defectImages));
this.observable.pipe(
merge(observable)
).subscribe(data => console.log('merge', data))
This KIND OF works as I expect BUT this merged observables Is connected to html angular template.
<ion-list>
**<ng-container *ngFor="let image of observable | async">**
<ion-item *ngIf="image.deletedAt === undefined">
<span class="item-container" (click)="showImage(image)">
<ion-thumbnail item-start>
<img id="{{image.url}}" src="{{getUrl(image) + image.url}}">
</ion-thumbnail>
<span>
<p>created at: {{image.createdAt | date: 'd/M/yy H:m'}}</p>
<p>created by: {{image.createdBy}}</p>
</span>
</span>
<button ion-button item-end (click)="removeImage(image)">
<ion-icon name="trash"></ion-icon>
</button>
</ion-item>
</ng-container>
</ion-list>
This is the console logs Im getting
My question is Why do I have two separate logs for each stream instead of One console log with all the data combined?
javascript angular rxjs reactive-programming
add a comment |
up vote
0
down vote
favorite
Hello guys Im trying to grasp RxJS lib and the whole idea of reactive programming.
Im trying to merge two observables into one. First observable contains array of objects DefectImages
the second observable contains array of strings, which then I convert to array of DefectImages
. After that I would like to merge these two observables into one.
Below my code:
const observable = CachedPhotosBuffer.getInstance().asObservable()
.pipe(
switchMap(data => {
return data.map((url) => DefectImage.createTempImage(url, 'you', Date.now()));
})
);
this.observable = Observable.create(observer => observer.next(this.defectImages));
this.observable.pipe(
merge(observable)
).subscribe(data => console.log('merge', data))
This KIND OF works as I expect BUT this merged observables Is connected to html angular template.
<ion-list>
**<ng-container *ngFor="let image of observable | async">**
<ion-item *ngIf="image.deletedAt === undefined">
<span class="item-container" (click)="showImage(image)">
<ion-thumbnail item-start>
<img id="{{image.url}}" src="{{getUrl(image) + image.url}}">
</ion-thumbnail>
<span>
<p>created at: {{image.createdAt | date: 'd/M/yy H:m'}}</p>
<p>created by: {{image.createdBy}}</p>
</span>
</span>
<button ion-button item-end (click)="removeImage(image)">
<ion-icon name="trash"></ion-icon>
</button>
</ion-item>
</ng-container>
</ion-list>
This is the console logs Im getting
My question is Why do I have two separate logs for each stream instead of One console log with all the data combined?
javascript angular rxjs reactive-programming
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
Hello guys Im trying to grasp RxJS lib and the whole idea of reactive programming.
Im trying to merge two observables into one. First observable contains array of objects DefectImages
the second observable contains array of strings, which then I convert to array of DefectImages
. After that I would like to merge these two observables into one.
Below my code:
const observable = CachedPhotosBuffer.getInstance().asObservable()
.pipe(
switchMap(data => {
return data.map((url) => DefectImage.createTempImage(url, 'you', Date.now()));
})
);
this.observable = Observable.create(observer => observer.next(this.defectImages));
this.observable.pipe(
merge(observable)
).subscribe(data => console.log('merge', data))
This KIND OF works as I expect BUT this merged observables Is connected to html angular template.
<ion-list>
**<ng-container *ngFor="let image of observable | async">**
<ion-item *ngIf="image.deletedAt === undefined">
<span class="item-container" (click)="showImage(image)">
<ion-thumbnail item-start>
<img id="{{image.url}}" src="{{getUrl(image) + image.url}}">
</ion-thumbnail>
<span>
<p>created at: {{image.createdAt | date: 'd/M/yy H:m'}}</p>
<p>created by: {{image.createdBy}}</p>
</span>
</span>
<button ion-button item-end (click)="removeImage(image)">
<ion-icon name="trash"></ion-icon>
</button>
</ion-item>
</ng-container>
</ion-list>
This is the console logs Im getting
My question is Why do I have two separate logs for each stream instead of One console log with all the data combined?
javascript angular rxjs reactive-programming
Hello guys Im trying to grasp RxJS lib and the whole idea of reactive programming.
Im trying to merge two observables into one. First observable contains array of objects DefectImages
the second observable contains array of strings, which then I convert to array of DefectImages
. After that I would like to merge these two observables into one.
Below my code:
const observable = CachedPhotosBuffer.getInstance().asObservable()
.pipe(
switchMap(data => {
return data.map((url) => DefectImage.createTempImage(url, 'you', Date.now()));
})
);
this.observable = Observable.create(observer => observer.next(this.defectImages));
this.observable.pipe(
merge(observable)
).subscribe(data => console.log('merge', data))
This KIND OF works as I expect BUT this merged observables Is connected to html angular template.
<ion-list>
**<ng-container *ngFor="let image of observable | async">**
<ion-item *ngIf="image.deletedAt === undefined">
<span class="item-container" (click)="showImage(image)">
<ion-thumbnail item-start>
<img id="{{image.url}}" src="{{getUrl(image) + image.url}}">
</ion-thumbnail>
<span>
<p>created at: {{image.createdAt | date: 'd/M/yy H:m'}}</p>
<p>created by: {{image.createdBy}}</p>
</span>
</span>
<button ion-button item-end (click)="removeImage(image)">
<ion-icon name="trash"></ion-icon>
</button>
</ion-item>
</ng-container>
</ion-list>
This is the console logs Im getting
My question is Why do I have two separate logs for each stream instead of One console log with all the data combined?
javascript angular rxjs reactive-programming
javascript angular rxjs reactive-programming
asked Nov 21 at 19:15
filemonczyk
342319
342319
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
Merging observables means that items emitted by both observable will be emitted successively and separately by the new merged observable, cf this page. If your observables emit just one item each and you want the merge the items by concatenating the arrays, you could use the zip operator as follows:
zip(observable, this.observable)
.pipe(map(x => x[0].concat(x[1])))
.subscribe(data => console.log('merge', data))
More precisely zip(obsa, obsb)
creates a new observable that listens to obsa and obsb, and after receiving itema from obsa and itemb from obsb emits the item x=[itema, itemb]
. In your case x[0]=itema
, x[1]=itemb
are arrays and (x => x[0].concat(x[1]))
concatenates these two arrays. Note that if obsa and obsb emit more than one array, the zipped observable will always wait to have one item from obsa and one from obsb before emitting a new [itema, itemb]
. For the concat() method, cf this page.
And don't forget to import { zip } from 'rxjs'
and import { map } from 'rxjs/operators'
.
works like a charm, Could you explain why we need map operator? what we have before map and after map ? and why is this implemented in such way x[0].concat(x[1])??
– filemonczyk
Nov 21 at 19:58
I edited the answer.
– Rolvernew
Nov 21 at 20:16
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
Merging observables means that items emitted by both observable will be emitted successively and separately by the new merged observable, cf this page. If your observables emit just one item each and you want the merge the items by concatenating the arrays, you could use the zip operator as follows:
zip(observable, this.observable)
.pipe(map(x => x[0].concat(x[1])))
.subscribe(data => console.log('merge', data))
More precisely zip(obsa, obsb)
creates a new observable that listens to obsa and obsb, and after receiving itema from obsa and itemb from obsb emits the item x=[itema, itemb]
. In your case x[0]=itema
, x[1]=itemb
are arrays and (x => x[0].concat(x[1]))
concatenates these two arrays. Note that if obsa and obsb emit more than one array, the zipped observable will always wait to have one item from obsa and one from obsb before emitting a new [itema, itemb]
. For the concat() method, cf this page.
And don't forget to import { zip } from 'rxjs'
and import { map } from 'rxjs/operators'
.
works like a charm, Could you explain why we need map operator? what we have before map and after map ? and why is this implemented in such way x[0].concat(x[1])??
– filemonczyk
Nov 21 at 19:58
I edited the answer.
– Rolvernew
Nov 21 at 20:16
add a comment |
up vote
1
down vote
accepted
Merging observables means that items emitted by both observable will be emitted successively and separately by the new merged observable, cf this page. If your observables emit just one item each and you want the merge the items by concatenating the arrays, you could use the zip operator as follows:
zip(observable, this.observable)
.pipe(map(x => x[0].concat(x[1])))
.subscribe(data => console.log('merge', data))
More precisely zip(obsa, obsb)
creates a new observable that listens to obsa and obsb, and after receiving itema from obsa and itemb from obsb emits the item x=[itema, itemb]
. In your case x[0]=itema
, x[1]=itemb
are arrays and (x => x[0].concat(x[1]))
concatenates these two arrays. Note that if obsa and obsb emit more than one array, the zipped observable will always wait to have one item from obsa and one from obsb before emitting a new [itema, itemb]
. For the concat() method, cf this page.
And don't forget to import { zip } from 'rxjs'
and import { map } from 'rxjs/operators'
.
works like a charm, Could you explain why we need map operator? what we have before map and after map ? and why is this implemented in such way x[0].concat(x[1])??
– filemonczyk
Nov 21 at 19:58
I edited the answer.
– Rolvernew
Nov 21 at 20:16
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
Merging observables means that items emitted by both observable will be emitted successively and separately by the new merged observable, cf this page. If your observables emit just one item each and you want the merge the items by concatenating the arrays, you could use the zip operator as follows:
zip(observable, this.observable)
.pipe(map(x => x[0].concat(x[1])))
.subscribe(data => console.log('merge', data))
More precisely zip(obsa, obsb)
creates a new observable that listens to obsa and obsb, and after receiving itema from obsa and itemb from obsb emits the item x=[itema, itemb]
. In your case x[0]=itema
, x[1]=itemb
are arrays and (x => x[0].concat(x[1]))
concatenates these two arrays. Note that if obsa and obsb emit more than one array, the zipped observable will always wait to have one item from obsa and one from obsb before emitting a new [itema, itemb]
. For the concat() method, cf this page.
And don't forget to import { zip } from 'rxjs'
and import { map } from 'rxjs/operators'
.
Merging observables means that items emitted by both observable will be emitted successively and separately by the new merged observable, cf this page. If your observables emit just one item each and you want the merge the items by concatenating the arrays, you could use the zip operator as follows:
zip(observable, this.observable)
.pipe(map(x => x[0].concat(x[1])))
.subscribe(data => console.log('merge', data))
More precisely zip(obsa, obsb)
creates a new observable that listens to obsa and obsb, and after receiving itema from obsa and itemb from obsb emits the item x=[itema, itemb]
. In your case x[0]=itema
, x[1]=itemb
are arrays and (x => x[0].concat(x[1]))
concatenates these two arrays. Note that if obsa and obsb emit more than one array, the zipped observable will always wait to have one item from obsa and one from obsb before emitting a new [itema, itemb]
. For the concat() method, cf this page.
And don't forget to import { zip } from 'rxjs'
and import { map } from 'rxjs/operators'
.
edited Nov 21 at 20:20
answered Nov 21 at 19:31
Rolvernew
1817
1817
works like a charm, Could you explain why we need map operator? what we have before map and after map ? and why is this implemented in such way x[0].concat(x[1])??
– filemonczyk
Nov 21 at 19:58
I edited the answer.
– Rolvernew
Nov 21 at 20:16
add a comment |
works like a charm, Could you explain why we need map operator? what we have before map and after map ? and why is this implemented in such way x[0].concat(x[1])??
– filemonczyk
Nov 21 at 19:58
I edited the answer.
– Rolvernew
Nov 21 at 20:16
works like a charm, Could you explain why we need map operator? what we have before map and after map ? and why is this implemented in such way x[0].concat(x[1])??
– filemonczyk
Nov 21 at 19:58
works like a charm, Could you explain why we need map operator? what we have before map and after map ? and why is this implemented in such way x[0].concat(x[1])??
– filemonczyk
Nov 21 at 19:58
I edited the answer.
– Rolvernew
Nov 21 at 20:16
I edited the answer.
– Rolvernew
Nov 21 at 20:16
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.
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%2f53419090%2fmerge-two-observables-single-output%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