Combining array elements into functions with RxJS observables

Question

Combining array elements into functions with RxJS observables

I am facing a scenario where I have an array of values that need to be processed sequentially using observables in RxJS.

Is there a more optimized way to achieve this instead of using nested subscriptions?

  let num = 0;

  let myObs = new Observable(observe => {
    observe.next(1);
  })
  let content=['x','y','z'];

  myObs.subscribe(data => {
    let i = 0;
    let self = this;
    let inlineFunction = function(){
      if (i < content.length){
        self.generate(num).subscribe(() => {
          i++;
          inlineFunction();
        });
      }else{
        observer.next(doc);
      }
    };
    inlineFunction();
  });

  generate(num:number) : Observable < any >{
    return num*num;
  },

typescript rxjs

Answer 1

Answer №1

If you're looking to continuously and repeatedly call an observable, you can utilize Observable.expand().

Let's say you have an array of content:

let content=['x','y','z'];

For each value in the content array, suppose you need to invoke a function called gen() which produces an Observable:

gen(num: number): Observable<any> {
    return Observable.of(num * num);
}

Here is how you can achieve this:

let myObs = Observable.of(1);
let num = 0;
let content = ['x','y','z'];

const gen = (num: number): Observable<any> => {
  return Observable.of(num * num);
}

myObs
.expand(()=>{
  return gen(num);
})
.skip(1)
.take(content.length)
.subscribe(x=>console.log(x));

Explanation:

.expand() will continue to call the specified function (as the 1st argument) repetitively until instructed otherwise. In this case, it calls gen() which returns an observable.
.skip(1) skips the initial emission where myObs has a value of 1.
.take() stops the infinite .expand() loop after iterating through the length of the content array.
.subscribe() is used to retrieve the results.

Comment: The output generated will be:

This is because the value of num is 0. It is assumed that gen() is a placeholder function which should be replaced with Observables returning actual meaningful data.

Check out the JSBin for a working example.

Answer 2

If you're looking to continuously and repeatedly call an observable, you can utilize Observable.expand().

Let's say you have an array of content:

let content=['x','y','z'];

For each value in the content array, suppose you need to invoke a function called gen() which produces an Observable:

gen(num: number): Observable<any> {
    return Observable.of(num * num);
}

Here is how you can achieve this:

let myObs = Observable.of(1);
let num = 0;
let content = ['x','y','z'];

const gen = (num: number): Observable<any> => {
  return Observable.of(num * num);
}

myObs
.expand(()=>{
  return gen(num);
})
.skip(1)
.take(content.length)
.subscribe(x=>console.log(x));

Explanation:

.expand() will continue to call the specified function (as the 1st argument) repetitively until instructed otherwise. In this case, it calls gen() which returns an observable.
.skip(1) skips the initial emission where myObs has a value of 1.
.take() stops the infinite .expand() loop after iterating through the length of the content array.
.subscribe() is used to retrieve the results.

Comment: The output generated will be:

This is because the value of num is 0. It is assumed that gen() is a placeholder function which should be replaced with Observables returning actual meaningful data.

Check out the JSBin for a working example.

Answer 3

Answer №2

To begin, start by obtaining an observable of values using the from operator and then proceed to employ the reduce method:

Observable.from([...values])
    .reduce( this.reducingFn, 1 )

The reducingFunction is designed to take in two parameters: the initial value (which is the second argument in the reduce function) and the current value emitted by the outer stream (each value within the values array).

// Somewhere within your class
reducingFn(accumulatedValue, value){
    return accumulatedValue * value
}

Answer 4

To begin, start by obtaining an observable of values using the from operator and then proceed to employ the reduce method:

Observable.from([...values])
    .reduce( this.reducingFn, 1 )

The reducingFunction is designed to take in two parameters: the initial value (which is the second argument in the reduce function) and the current value emitted by the outer stream (each value within the values array).

// Somewhere within your class
reducingFn(accumulatedValue, value){
    return accumulatedValue * value
}

Combining array elements into functions with RxJS observables

Answer №1

Answer №2

Similar questions

Experiencing a problem in React JS when trying to render a component?

Exploring the return type of the `within` function in TypeScript Library

Angular with D3 - Semi-Circle Graph Color Order

I've tried using a ControlValueAccessor, but for some reason the value isn't getting passed to the form

Facing issue in Visual Studio 2015 with Angular 2 @component not able to resolve the signature of the class decorator

Tips for synchronizing the value of one field in a reactive form with changes in another field

TypeORM's one-to-many relationship alters the primary entity once the relationship has been established

How can I take photos in bulk when I open the camera on Ionic 3?

Distinguishing the switch function from the React switch operator (jsx, tsx)

Universal Parameter Typing in Functions

Using Angular 2, you can pass an object as a parameter to a function

Generating a composer method in TypeScript (Flow $Composer)

When trying to install my npm package from the registry, I keep encountering an issue despite being able to install it locally

Utilize a list of Data Transfer Objects to populate a dynamic bar chart in recharts with

Adjustable Material UI Switch that reflects the value, yet remains changeable

Typescript Angular2 filtering tutorial

iterating through the checked values in Angular 4

How is it that in TypeScript, a potential numeric value in an interface can be transformed into an impossible numeric value in a class implementation?

Is there a way to inform TypeScript that the process is defined rather than undefined?

Value of type 'string' cannot be assigned to type '{ model: { nodes: []; links: []; }; }'