Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 17:08
    tmair opened #6098
  • 13:18
    cartant closed #5609
  • 13:18
    cartant commented #5609
  • 12:48
    cartant commented #5917
  • 12:46
    cartant labeled #5917
  • 08:03
    spierala commented #4740
  • 07:42
    cartant synchronize #6097
  • 07:37
    cartant review_requested #6097
  • 07:37
    cartant opened #6097
  • 06:54
    cartant review_requested #6096
  • 06:54
    cartant opened #6096
  • 06:40
    cartant edited #6095
  • 06:28
    cartant review_requested #6095
  • 06:28
    cartant opened #6095
  • 05:06
    cartant commented #6072
  • 05:06
    cartant commented #6072
  • Mar 06 22:25
    spierala commented #4740
  • Mar 06 19:26
    calebboyd synchronize #6043
  • Mar 06 12:15
    cartant edited #6081
  • Mar 06 12:14
    cartant edited #6085
Sea * Side Syndication
@sea-side-syndication
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
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
@freshdev1
@danww first example doesn't describe the problem I mentioned. May be you pasted a wrong URL. :)
The second doesn't run. It keeps showing Connecting to dev server at the bottom after I hit Run this project button.
Daniel Willis
@danww
@freshdev1 Sorry - yes, that was something else; my bad. Here it is: https://stackblitz.com/edit/angular-ivy-zravkz?file=src%2Fapp%2Fapp.component.ts
freshdev1
@freshdev1
Awesome. Integrating it. :smile:
You're a champ. :P
freshdev1
@freshdev1
@danww can you explain a little about why you did not filter in the start and then later filtered out the id and appid?
ngOnInit() {
    this.id$ = this.route.queryParams.pipe(map(params => params.id)); //<---- why no filter here
    this.applicationId$ = this.route.queryParams.pipe(
      filter(params => !!params.appId),                                                                      //<----- but here any intended purpose of this?  
      map(params => params.appId)
    );
    const combinedIds$ = combineLatest([
      this.id$.pipe(filter((id: string) => id !== null)),                                               // and then here
      this.applicationId$.pipe(
        filter((applicationId: string) => applicationId !== null)
      )
    ]);

    this.result$ = combinedIds$.pipe(
      map(([id, applicationId]: [string, string]) => ({
        id,
        applicationId
      }))
    );

    this.result$.subscribe(result => {
      console.log({ result });
    });
  }
}
additionally if you can also explain me to integrate switchMap with this, it would be great. what is a Project function it expects. I am never able to implement it.
    //set id if present
    var idParam = this.route.queryParams
    .pipe(
      filter(params => !!params.id),
      map(params => params.id)
    );

    var applicationParam = this.route.queryParams
    .pipe(
      filter(params => !!params.applicationId),
      map(params => params.applicationId)
    );

    const combined = combineLatest([
      idParam.pipe(filter((id: string) => id !== null)),
      applicationParam.pipe(
        filter((applicationId: string) => applicationId !== null)
      )
    ]).pipe(
      map(([id, applicationId] : [string, string]) => ({
        id,
        applicationId
      }))
    );

    var result = combined.pipe(
      switchMap(result => {

      })
    );

    result.subscribe((contract: TenantContract) => {

    });
I am getting an error in switchMap clause.
freshdev1
@freshdev1
Ok it works as expected. Got it done.