CODEWITHSUNDEEP
angulartypescriptangular6rxjs6
sebaLinares
sebaLinares

Reputation: 495

chain 1 observable result with a stream of observables for a final const

I got 5 behaviour subjects in a service, where I collect information from other components to finally combine them in one last object in a final component. My Problem is I can't get the final object to have every element that is collected.

The detail is that in the first component the user chooses one of two roads to take, so at the final component -before I suscribe to everything- I need to see what did the user chose and just consume that observable (forthObsOne or forthObsTwo) and not his non-chosen brother.

my-service.service.ts

private firstObs = new BehaviorSubject(new Class1());
private secondObs = new BehaviorSubject(new Class2());
private thirdObs = new BehaviorSubject(new Class5());

//this are the two brother component to be chosen from
private forthObsOne = new BehaviorSubject(new Class3());
private forthObsTwo = new BehaviorSubject(new Class3);

// This is the obs for the option component where i choose if
// i take the forthObsOne or the forthObsTwo road
private optionObs = new BehaviorSubject(new Class6());

// Now i project those subjects as an observable like the docs recommendation
firstObs$ = this.firstObs.asObservable();
secondObs$ = this.secondObs.asObservable();
thirdObs$ = this.thirdObs.asObservable();
forthObsOne$ = this.forthObsOne.asObservable();
forthObsTwo$ = this.forthObsTwo.asObservable();
optionObs$ = this.optionObs.asObservable();

// Methods for every subject to pass the data from where they are called
firstObsNext(data: Class1) {
  this.firstObs.next(data)
} 

secondObsNext(data: Class1) {
  this.secondObs.next(data)
}

thirdObsNext(data: Class1) {
  this.thirdObs.next(data)
}

forthObsOneNext(data: Class1) {
  this.forthObsOne.next(data)
}

forthObsTwoNext(data: Class1) {
  this.forthObsTwo.next(data)
}

optionObsNext(data: Class1) {
  this.optionObs.next(data)
}

// The latest thing i tried is with combielatest where i combine 
// every observable and try to assign the data to a new big object.

I've tried first subscribing to optionObs and making and if/else statement to take the forthObsOne or forthObsTwo road. But at the end I got some elements undefined. I tried delaying everything with a timeout but i think that's more like a hack and not very professional

At last I tried with combinelatest but failed miserably as I think i'm not understanding it that well (I've watched videos and docs but still can't apply that to this specific problem).

I expect to get a final object with everything I have collected through the components.

I hope it clear enough. Thanks.

UPDATE I'm trying this with the forkJoin approach I've been recommended

let observables1 = [
  this.datosAdminAcumul$,
  this.escalaAcumul$,
  this.seccionesAcumul$,
  this.rubricaUnoAcumul$
];
let observables2 = [
  this.datosAdminAcumul$,
  this.escalaAcumul$,
  this.seccionesAcumul$,
  this.rubricaDosAcumul$
];

this.optionObs$.subscribe(option => {
  if (option == "one") {
    forkJoin(...observables1).subscribe(x => {
      (data1 = x[0]),
        (data2 = x[1]),
        (data3 = x[2]),
        (data4 = x[3]);
        // i've tried `console.log()` here but it returns me four undefined values
    });
       // i've tried `console.log()` here, same result.
  } else {
    forkJoin(...observables2).subscribe(x => {
      let pautaFinal = {
        admin: x[0],
        escala: x[1],
        rubrica: x[2],
        secciones: x[3]
      };
    });

Upvotes: 1

Views: 44

Answers (1)

Derviş Kayımbaşıoğlu
Derviş Kayımbaşıoğlu

Reputation: 30565

you can use forkJoin for array of observables

let observables = [obs1, obs2];

forkJoin(...observables).subscribe(x => {
  let result1 = x[0];
  let result2 = x[1];
});

Edit: * First i need to consume that to go for forthObsOne or forthObsTwo*

let resultObservable =  return this.observable1().pipe(mergeMap((param1) => {
  let observables = [obs1];
  if (param1.condition == true)
     observables.push(obs2);

  return forkJoin(...observables).pipe(map((param1) => {

    ....        

    return <result>;
  }));
}));

resultObservable.subscribe(x => {
   ...
});

Upvotes: 1

Related Questions