Reactive-Extensions/RxJS

The Reactive Extensions for JavaScript

Dorus

@Dorus

i forgot the details, it was a while back :)

Yaakov Chaikin

@ychaikin

takeUntil(subject) will unsubscribe but I was wondering about completing the subject with complete(), which is a bit different of a topic.

But I think I have it clear now. Thanks!

Dorus

@Dorus

As i said, not necessarily for the takeUntil, but you could do it if there are other subscriptions to the subject that you didn't track.

Althou i highly doubt there are any others.

Yaakov Chaikin

@ychaikin

👍

freshdev1

@freshdev1

@Dorus thank you for taking a time to look at my example. I was squarely wrong about it. @danww already guided me in another channel and I was able to get things to work. The idea was to directly send the observable to the child components and use the ASYN pipe to resolve it.

Dorus

@Dorus

@freshdev1 Ah yes that's also possible. However a bit icky. You should consider to make a service that encapsulates the observable :)

abhip5369

@abhip5369

Hi all, I am using shareReplay() to replay the http response(list of items) in different tabs on same page to fill a dropdown thats there in all the tabs, but if the value is updated from 1 of the tabs the list of items in the dropdown is not updated. Is there a way with Rxjs to achieve that ?

1 reply

Sea * Side Syndication

@sea-side-syndication

Screen Shot 2021-01-14 at 8.20.21 PM.png

what is the correct way to reconnect a websocket? what should I be putting in closeObserver to reconnect to the websocket?

Sea * Side Syndication

@sea-side-syndication

is there a thorough angular/rxjs websocket example you guys could recommend? perhaps one with multiplex?

Sea * Side Syndication

@sea-side-syndication

for those curious, i followed what was written here: https://github.com/lamisChebbi/ng-realtime-dashboard/blob/54ae8b658ad49e1ebbe5fc295a3e991613a4b88d/src/app/services/data.service.ts

freshdev1

@freshdev1

Guys quick question... I think it will be easy for many, I am just new to this so struggling

 this.beds$ = this.wrcService.getWrcBedsByFilter(this.wrcId, workerTypeId, blockId, buildingId, floorId, ['100000002'])
    .pipe(
      tap(bedsResponse => console.log(bedsResponse)),
      filter(bedsResponse => bedsResponse != null),
      flatMap(beds => beds),
      map(bed => {
        bed.numberOfBedsArray = Array.from({length: bed.qty}, (v, i) => i + 1);
        return bed;
      }),
      mergeMap(beds => beds)
    );

here bedsResponse is of type Observable<Bed[]>

I am flatting it to each Bed object

Dorus

@Dorus

You can combine the last 2 calls, if you use mergeMap instead of map, you wont need the mergeMap after.

Or return Observablefrom()

freshdev1

@freshdev1

mapping it. and then want to again return Observable<Bed[]>

Dorus

@Dorus

btw flatmap and mergeMap are identical, it's strange to use both in the same code

mergeMap is the new one you should use, the other is just an allias

freshdev1

@freshdev1

Ok. I didn't know that

how to combine them all to Observable<Bed[]> again after transformation

Dorus

@Dorus

Why even split them?

this.wrcService.getWrcBedsByFilter().pipe(map(beds => beds.map(...))) should be enough right?

if you're not doing anything async inside map, you dont need Rx

freshdev1

@freshdev1

I want to update this value in each :
bed.numberOfBedsArray = Array.from({length: bed.qty}, (v, i) => i + 1);

Dorus

@Dorus

this.wrcService.getWrcBedsByFilter().pipe(map(beds => beds.map(bed => {
  bed.numberOfBedsArray = Array.from({length: bed.qty}, (v, i) => i + 1);
  return bed;
})))

Just that updating bed here is slighly dirty. Would be preferable to make a copy.

freshdev1

@freshdev1

Ok. So you mean I make a copy of the whole array

and then do this?

@Dorus thank you this helped. And it works.

Dorus

@Dorus

:+1:

Daniel Willis

@danww

@Dorus, I think this is what @freshdev1 means:

this.wrcService.getWrcBedsByFilter().pipe(
  map(beds => beds.map(bed => ({
    ...bed,
    numberOfBedsArray: Array.from({length: bed.qty}, (v, i) => i + 1),
  }))),
);

So it returns a new copy of bed, rather the modifying the exisiting one.

freshdev1

@freshdev1

@danww both works fine for me. I used what @Dorus suggested and it got the work done.

Dorus

@Dorus

@freshdev1 Yeah but @danww code avoid modifying the source, so that's a bit cleaner.

freshdev1

@freshdev1

i wanted to modify the source, as this is passed to the template and needs to have this to show the dropdown.

jcapil-ictdu

@jcapil-ictdu

Hi Devs. I would like to ask how to render the string as HTML?

This message was deleted

1 reply

Dorus

@Dorus

@freshdev1 The idea behind RxJs is that you have immutable event sources that you can reuse. You can still build any program you want, you just create new objects instead of modifying the existing ones. This means you map from an immutable source to a new immutable source. This avoids problems once you start multiplexing your sources, and makes your code more reusable. For your current program it probably wont make any difference, but by taking up this style you avoid problems down the road where you might be doing these things.

freshdev1

@freshdev1

@Dorus thanks for the clarification, will keep it noted from now on.

freshdev1

@freshdev1

Guys I have a scenario where I want to read 2 values from Queryparams observable in Angular.

I want to merge them and subscribe so that I get both values in 1 subscribe and then make a call to a webservice

I read merge and combine latest. but both only emits 1 latest value per observable

do you guys know if their is any way of achieving this?

//set id if present
    this.route.queryParams
    .pipe(
      map(param => param['id'])
    )
    .subscribe(paramValue => {
      this.contractId = paramValue;
    });

The same way I need to check for applicationId

but the expectation is to subscribe an observable which gives me the values of both of them collectively like:

var idQueryParamObs =   this.route.queryParams
    .pipe(
      filter(param => param['id'] != null),
      map(param => param['id'])
    );

var applicationIdQueryParamObs = this.route.queryParams
   .pipe(
      filter(param => param[applicationId'] != null),
      map(param => param['applicationId'])
   );

now how to combine and subscribe them?

Daniel Willis

@danww

@freshdev1 Here's a Stackblitz to demonstrate: https://stackblitz.com/edit/angular-ayggz1?file=src/app/list-selection-example.ts

@freshdev1 Example here: https://angular-ivy-zravkz.stackblitz.io/?id=1234&appId=5678

Where communities thrive

People

Repo info

Activity