Pass arguments into array of observables

Question

I'm using a forkJoin of observables but I'm having troubles to pass arguments in my observables. Lines of code worth a thousand words:

for(var key in pdfObjects){
    let pdf = {pdfObjects[key]};
    observables.push(new Observable(observer => {
        this.createPDF(pdf).subscribe((pdfFile) => {
            // Do something with my pdfFile
            observer.complete();
        })
    })
}
Observable.forkJoin(observables).subscribe(
    (next) => {},
    (error) => {},
    (completed) => {
        console.log('completed');
    }
);

(I have simplified the code for better clarity)

As you can see here, the problem is that when the code executes the observables, the pdf variable is equal to the last pdfObjects instead of being a different variable for each observable.

The question is how can I 'pass' and 'copy' my pdf variable so it's a diffent one for each observable?

Did you mean to surround the value with brackets in the let, creating a new object with a key of 'pdfObjects', or is that a typo when simplifying? — Jason Goemaat
– Jason Goemaat, Commented Jun 13, 2016 at 7:16

Community · Accepted Answer · 2017-05-23 11:54:14Z

4

You should call the next method instead of the complete one:

observables.push(new Observable(observer => {
  this.createPDF(pdf).subscribe((pdfFile) => {
    // Do something with my pdfFile
    observer.next(pdf); // <-----
  });
})

Edit

Your problem is related to the use of closures within loops.

You could break with a method:

createObservable(pdf:any) {
  return new Observable(observer => {
    this.createPDF(pdf).subscribe((pdfFile) => {
      // Do something with my pdfFile
      observer.complete();
    });
  });
}

otherMethod() {
  for(var key in pdfObjects){
    let pdf = {pdfObjects[key]};
    observables.push(this.createObservable(pdf));
  }
  (...)
}

See this question for more details:

JavaScript closure inside loops – simple practical example

See this plunkr: https://plnkr.co/edit/P4BfwnA1HEw7KU4i3RbN?p=preview.

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Jun 13, 2016 at 5:48

Thierry Templier

203k44 gold badges407 silver badges366 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nate Over a year ago

Thanks but it doesn't solve the problem here... observer.next() will simply return the pdf value in the subscribe of the forkJoin! What I need is that each observable has its own pdf variable as it argument.

Thierry Templier Over a year ago

I think that your problem is related to the use of closures within loops. I updated my answer accordingly...

Nate Over a year ago

Will the observables have a different pdf argument? The problem I see is that you're pushing the function with a pdf reference and that reference will change (it will be equal to the last pdfObjects item) when it will be executed by the forkJoin.

Nate Over a year ago

Am I missing something?

Thierry Templier Over a year ago

In fact, in this case, the variable wouldn't be bound to the variable outside the inner function (your problem). I added a plunkr in my answer ;-)

Jason Goemaat · Accepted Answer · 2016-06-13 08:05:24Z

@Thierry is right, here's an example to show what's going on (fiddle)

var pdfObjects = {
  a: 'Object A',
  b: 'Object B',
  c: 'Object C'
};

for(let key in pdfObjects) {
  let pdf = pdfObjects[key];
  function createObservable(p) {
    console.log('createObservable:', p, pdf, key);
    return Rx.Observable.create(observer => {
      console.log('createObservable.create:', p, pdf, key);
      observer.onNext({ p: p, pdf: pdf, key: key});
      observer.onCompleted();
    });
  }
  observables.push(createObservable(pdf));
}

Result:

createObservable: Object A Object A a
createObservable: Object B Object B b
createObservable: Object C Object C c
createObservable.create: Object A Object C c
createObservable.create: Object B Object C c
createObservable.create: Object C Object C c

When createObservable is called, each value is as you would expect. But when you subscribe to your observables, the anonymous function that takes observer is called by RxJs and is using the current values for pdf and key which are what they were the last time through the loop. But because you're creating a function, there's a new scope and the argument 'p' in that scope is the value the function was called with.

Collectives™ on Stack Overflow

Pass arguments into array of observables

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related