Anticipating the completion of multiple observable subscription functions

Question

Anticipating the completion of multiple observable subscription functions

Is there a way to replace and convert all words in an array using an object's method that returns an observable? I found a helpful solution on this post which uses bind to pass the correct value.

After all subscriptions are complete, I want to execute another function called task2(). How should I go about implementing this?

for(let word in this.words){
    var i = Object.keys(this.words).indexOf(word);

    this.convertor.get(this.words[i].value).subscribe( function (i, result) {
    this.words[i].value = result; 
  }.bind(this, i));
}

//task2() <--------- when all subscribe functions finished

javascript typescript observable

Answer 1

Answer №1

Can you identify the data type of this.words? If it happens to be an array, iterating through its elements becomes much simpler... It seems like there is a peculiar approach being used in your code...

Furthermore, contemplate utilizing arrow functions as a replacement for frequent usages of bind(this). This practice contributes to enhancing the readability of the code.

A suggestion would be to refactor your existing code by implementing the use of forkJoin:

let streams = [];
for(let i = 0; i<this.words.length; i++){
    streams.push(this.convertor.get(this.words[i].value));
}

Rx.Observable.forkJoin(streams).subscribe((result) => {
    // At this point, 'result' comprises an array containing the outcome, arranged in the correct sequence (The initial outcome corresponds to the first stream, and so forth).
    for(let i=0; i<result.length; i++) {
        this.words[i].value = result[i];
    }

    task2();
});

Answer 2

Can you identify the data type of this.words? If it happens to be an array, iterating through its elements becomes much simpler... It seems like there is a peculiar approach being used in your code...

Furthermore, contemplate utilizing arrow functions as a replacement for frequent usages of bind(this). This practice contributes to enhancing the readability of the code.

A suggestion would be to refactor your existing code by implementing the use of forkJoin:

let streams = [];
for(let i = 0; i<this.words.length; i++){
    streams.push(this.convertor.get(this.words[i].value));
}

Rx.Observable.forkJoin(streams).subscribe((result) => {
    // At this point, 'result' comprises an array containing the outcome, arranged in the correct sequence (The initial outcome corresponds to the first stream, and so forth).
    for(let i=0; i<result.length; i++) {
        this.words[i].value = result[i];
    }

    task2();
});

Answer 3

Answer №2

A strategy I've devised involves creating a function that triggers another function only after a specified number of calls, similar to how Promise.all works.

Here is an example implementation:

  function executeAfterNthCall(callCount, callback)
    {
    var callIter = 0;
    return function()
      {
      callIter++;
      if(callIter === callCount) { callback(); }
      }
    }
var task2AfterLastCall = executeAfterNthCall(Object.keys(this.words).length, task2);

for(let word in this.words){
    var i = Object.keys(this.words).indexOf(word);

    this.convertor.get(this.words[i].value).subscribe( function (i, result) {
    this.words[i].value = result; 
    task2AfterLastCall();
  }.bind(this, i));
}

Answer 4

A strategy I've devised involves creating a function that triggers another function only after a specified number of calls, similar to how Promise.all works.

Here is an example implementation:

  function executeAfterNthCall(callCount, callback)
    {
    var callIter = 0;
    return function()
      {
      callIter++;
      if(callIter === callCount) { callback(); }
      }
    }
var task2AfterLastCall = executeAfterNthCall(Object.keys(this.words).length, task2);

for(let word in this.words){
    var i = Object.keys(this.words).indexOf(word);

    this.convertor.get(this.words[i].value).subscribe( function (i, result) {
    this.words[i].value = result; 
    task2AfterLastCall();
  }.bind(this, i));
}

Anticipating the completion of multiple observable subscription functions

Answer №1

Answer №2

Similar questions

What is the correct method for configuring access permissions?

The Tailwind preset is generating CSS code, but the webpage is not displaying the intended styles

How to verify if an object is empty in an AngularJS expression

Displaying JSON data on an HTML page

Exploring the use of jQuery/JS for parsing and working with JSON

New to React and struggling with updating the DOM

Encountering the error message "Function.prototype.bind.apply(...) cannot be invoked as a constructor

Utilizing a jQuery AJAX request to invoke a web method within a

Sending numerous HTML forms using a sole submit button through AJAX

What is the method to trigger a function upon opening an anchor tag?

Stay dry - Invoke the class method if there is no instance available, otherwise execute the instance method

Tips on populating the gap between dual cylinder meshes in Three.js

Avoiding drag events in hammer.js until the previous event is finished

Utilizing a GLTF asset as the main Scene element in a Three.js project

ArangoDB's graph maxDepth setting causing excessive iterations

Is it possible to utilize useRef to transfer a reference of an element to a child component?

Update the input value with the selected option from the dropdown menu in Angular

When using TypeScript with custom components as children in React, the `type` returned by React.Children is a string representing the function

Page freezing due to JQuery scroll event

Reorganizing the layout of a React grid in response to changes in screen size