Reactive-Extensions/RxJS

The Reactive Extensions for JavaScript

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

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.

freshdev1

@freshdev1

Thank you for taking out time and suggesting a solution.

Daniel Willis

@danww

@freshdev1 Sorry, I wasn't very consistent with the filters. I guess they should be applied at the earliest opportunity. What are you wanting to do with the switchMap?

freshdev1

@freshdev1

i made a call to the backend to fetch the information based on ID / Application Id which ever is available

I removed the filters altogether. as I wanted them to be null, since one of them or both could be null. in case both are null, I don't make a call, but in other cases I do.

freshdev1

@freshdev1

after I write down the message to you, I realized, its not working if anyone of them is null. :(

Rafael Avaria Gutierrez

@makenoisewacamayo

Hi i got a question regarding piece of code i have, i would like to use concatMap.

this.apiService
      .getVigencia()
      .pipe(
        tap(() => this.getUserSuscriptions()),
        filter(res => res.vigenciaIva != true)
      )
      .subscribe(

Rafael Avaria Gutierrez

@makenoisewacamayo

 this.apiService
      .getVigencia()
      .pipe(
        tap(() => this.getUserSuscriptions()),
        filter(res => res.vigenciaIva != true)
      )
      .subscribe( // do something)
.......
// the function getUserSubcription() is his own best

getUserSuscriptions() {
    this.apiService
      .getStatus(requestData, this.userRut)
      .pipe(
        tap(res => {
          this.showError =
            Array.isArray(res.servicios) && res.servicios.length === 0;
        }),
        filter(() => this.showError === false)
      )
      .subscribe(
       // process the everything
      )

This is legacy code, but i would like to change using concatMap to call in sequence . I having issues with this for some weird cases.

any help will be aprecciated

SAGO

@SAGOlab

@makenoisewacamayo something like:

this.apiService.getVigencia().pipe(
    mergeMap( data => this.apiService.getStatus( requestData, this.userRut ) )
    .pipe(
        filter( res => res.vigenciaIva !== true ),
        map( res => ( [data, res] )
).subscribe(
        finalData => {
            console.log(finalData);
        },
      error => {
        this.showError = error
      }
);

SAGO

@SAGOlab

Hi there, I have this three methods:

getDateRange($event) {
    this.dateRange = $event.range;
  }

  getMembers($event) {
    this.highlightMembers = $event.selectedMembers;
  }

  isChecked($event) {
    reurn this.statusSelected.concat(this.prioritySelected)
  }

I need to create an array from combination of all of this events, because at last I need to send an eventEmitter that contains this array created dynamically from those events, there is a way to do this with rxjs?

SAGO

@SAGOlab

no one?

Daniel Willis

@danww

@SAGOlab Something like this:?

someEventEmitter.emit([
  $event.range,
  $event.selectedMembers,
  this.statusSelected.concat(this.prioritySelected),
]);

@SAGOlab Although I'd create a type definition for the object:

export interface EmitterType {
  range: string; // or number or whatever
  selectedMembers: Member[];
  isChecked: boolean;
}

...

@Output someEventEmitter: EventEmitter<EmitterType> = new EventEmitter<EmitterType>();

...

someEventEmitter.emit({range: $event.range,
  selectedMembers :$event.selectedMembers,
  isChecked: this.statusSelected.concat(this.prioritySelected),
});

...assuming I've correctly understood what you're asking.

SAGO

@SAGOlab

@danww but $event.range, $event.selectedMEmbers and this.statusSelected.concat(this.prioritySelected) are three different $event and if I try to combine them someone always return undefined, instead I wish that would no undefined value...

this was my first attempt:

isChecked($event) {
     if ($event.selectedMembers !== undefined) {
       this.highlightMembers = ;
       this.highlightMembers.forEach(member => this.statusSelected.push(member))
       const withMembers = this.statusSelected.concat(this.prioritySelected);
       this.toggleCheck.emit({$event, optionsChecked: withMembers});  
     }
     else if ($event.range !== undefined) {
       this.dateRange = $event.range;
       this.statusSelected.push(this.dateRange)
       this.highlightMembers.forEach(member => this.statusSelected.push(member))
       const withDate = this.statusSelected.concat(this.prioritySelected);
       this.toggleCheck.emit({$event, optionsChecked: withDate}); 
     }
     else {
       const withoutMembers = this.statusSelected.concat(this.prioritySelected)
      this.toggleCheck.emit({$event, optionsChecked: withoutMembers});
    }
    this.toggleCheck.emit({$event, optionsChecked: b});

Daniel Willis

@danww

@SAGOlab Could you make this.dateRange, this.selectedMembers, and this.prioritySelected into BehaviorSubjects and then listen to them with a combineLatest and fire the EventEmitter whenever one of them fires?

SAGO

@SAGOlab

@danww yes I'm evaluating your same idea...I'm trying to combine the three events with rxjs

So I need an observable that store the different $event in memory and combine them populating a unique array dynamically with or without the checkboxes selected or whatever else

but I'm not in luck yet...I'm trying something but nothing works...

Daniel Willis

@danww

@SAGOlab If you can be bothered putting the concept in a Stackblitz, I can have a play with it.

SAGO

@SAGOlab

can you provide me an example of behaviourSubject or any other kind of Observable

yes I'm trying

wait a moment

Daniel Willis

@danww

k k

SAGO

@SAGOlab

I'don't know how many time I'll sped to make a stackblitz

in the mean while I shared my code:

import { Component, EventEmitter, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatSelectionList } from '@angular/material/list';

@Component({
  selector: 'app-tasks-columns-menu',
  templateUrl: './tasks-columns-menu.component.html',
  styleUrls: ['./tasks-columns-menu.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class TasksColumnsMenuComponent {
  @ViewChild('priority', {static: true}) priority: MatSelectionList;
  @ViewChild('states', {static: true}) states: MatSelectionList;

  prioritySelected: object[] = [];
  statusSelected: object[] = [];
  highlightMembers: object[] = [];
  dateRange: object = [];
  mergeOptionsChecked: object[] = [];
  removable: boolean = true;

  @Output() toggleCheck = new EventEmitter<{$event: any, optionsChecked: object}>();
  @Output() userSelected = new EventEmitter<{$event: any, user: object[]}>();

  statusLabels: object[] = [
    {
      label: 'In attesa',
      status: 'Ready',
      key: 'task-status'
    },
    {
      label: 'Preso in carico',
      status: 'Reserved',
      key: 'task-status'
    },
    {
      label: 'In lavorazione',
      status: 'InProgress',
      key: 'task-status'
    },
    {
      label: 'Sospeso',
      status: 'Suspended',
      key: 'task-status'
    }];

  priorityLabels: object[] = [
    {
      label: 'Bassa',
      priority: [0, 1, 2, 3],
      key: 'task-priority'
    },
    {
      label: 'Media',
      priority: [4, 5, 6, 7],
      key: 'task-priority'
    },
    {
      label: 'Alta',
      priority: [8, 9, 10],
      key: 'task-priority'
    }
  ]  

  constructor() {}

  stopPropagation($event) {
    $event.stopPropagation();
  }

  isChecked($event) {
    if ($event.selectedMembers !== undefined) {
      this.highlightMembers = $event.selectedMembers;
      this.highlightMembers.forEach(member => this.statusSelected.push(member))
      const withMembers = this.statusSelected.concat(this.prioritySelected);
      this.toggleCheck.emit({$event, optionsChecked: withMembers});  
    }
    else if ($event.range !== undefined) {
      this.dateRange = $event.range;
      this.statusSelected.push(this.dateRange)
      this.highlightMembers.forEach(member => this.statusSelected.push(member))
      const withDate = this.statusSelected.concat(this.prioritySelected);
      this.toggleCheck.emit({$event, optionsChecked: withDate}); 
    }
    else {
      const withoutMembers = this.statusSelected.concat(this.prioritySelected)
      this.toggleCheck.emit({$event, optionsChecked: withoutMembers});
    }
  }

  remove($event, member: object): void {
    const index = this.highlightMembers.indexOf(member);

    if (index >= 0) this.highlightMembers.splice(index, 1);

    const removeMembers = this.mergeOptionsChecked.filter(option => option['label'] !== member['label'])

    this.toggleCheck.emit({$event, optionsChecked: removeMembers});
  }
}

Where communities thrive

People

Repo info

Activity