Is there a way to generate a series of time intervals in increments of fifteen minutes using RxJS?

Question

Is there a way to generate a series of time intervals in increments of fifteen minutes using RxJS?

I'm having trouble creating an array of times using RxJS operators in conjunction with Moment.js objects. I initially thought the generate() operator would be a good fit for this task, but it seems to be returning the same time repeatedly instead of incrementing it. Any ideas on what might be going wrong?

After referring to the documentation at

https://rxjs-dev.firebaseapp.com/api/index/function/generate

I learned that I should be able to utilize

generate(startingValue, condition, increment)

to generate an observable that can be piped or subscribed to. However, despite following these instructions, I have not been successful.


times(): void {
        const startTime: Moment = START.clone(); //2019-01-01T16:00:00.000
        const endTime: Moment = END;             //2019-01-01T21:00:00.000
        generate(startTime, time => time <= endTime, time => time.add(15, 'minutes')).pipe(
           toArray()
        ).subscribe(console.log);
}

// returns: [2019-01-01T16:00:00.000, 2019-01-01T16:00:00.000...] 20 times
// desired: [2019-01-01T16:00:00.000, 2019-01-01T16:15:00.000, 2019-01-01T16:30:00.000... ]

Currently, the result is an array containing 20 moment objects, all displaying the same time value.

angular typescript rxjs

Answer 1

Answer №1

Although I have yet to utilize the generate() function, it is conceivable that the issue lies in the mutable nature of the moment object. This means that momentObject.add(...) actually modifies the original momentObject. For more information on this behavior, please refer to: https://momentjs.com/guides/#/lib-concepts/mutability/

You may want to attempt the following approach:

generate(startTime, time => time <= endTime, time => time.clone().add(15, 'minutes'))

Answer 2

Although I have yet to utilize the generate() function, it is conceivable that the issue lies in the mutable nature of the moment object. This means that momentObject.add(...) actually modifies the original momentObject. For more information on this behavior, please refer to: https://momentjs.com/guides/#/lib-concepts/mutability/

You may want to attempt the following approach:

generate(startTime, time => time <= endTime, time => time.clone().add(15, 'minutes'))

Answer 3

Answer №2

Why is RxJs necessary to generate an array? Can't we just use Array.from instead? Remember, RxJs is used for creating streams, not arrays.

const createDateRange = (start, end, intervalQuantity, intervalType) => {
  const duration = moment.duration(end.diff(start));
  const interval = moment.duration(intervalQuantity, intervalType);
  return Array.from(
    { length: (duration.asHours() / interval.asHours()) + 1 },
    (_, i) => start.clone().add(moment.duration(intervalQuantity * i, intervalType))
  );
};

console.log(
  createDateRange(
    moment('2019-01-01T16:00:00.000'),
    moment('2019-01-01T21:00:00.000'),
    15,
    'minutes'
  )
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

If you wish to create an observable, you can wrap the array with "of" to emit the entire array at once or use "from" to emit each value individually.

Answer 4

Why is RxJs necessary to generate an array? Can't we just use Array.from instead? Remember, RxJs is used for creating streams, not arrays.

const createDateRange = (start, end, intervalQuantity, intervalType) => {
  const duration = moment.duration(end.diff(start));
  const interval = moment.duration(intervalQuantity, intervalType);
  return Array.from(
    { length: (duration.asHours() / interval.asHours()) + 1 },
    (_, i) => start.clone().add(moment.duration(intervalQuantity * i, intervalType))
  );
};

console.log(
  createDateRange(
    moment('2019-01-01T16:00:00.000'),
    moment('2019-01-01T21:00:00.000'),
    15,
    'minutes'
  )
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

If you wish to create an observable, you can wrap the array with "of" to emit the entire array at once or use "from" to emit each value individually.

Is there a way to generate a series of time intervals in increments of fifteen minutes using RxJS?

Answer №1

Answer №2

Similar questions

Challenges with Loading JSON Dynamically in Next.js using an NPM Package

Angular: handling asynchronous errors when no promise is utilized within a subscription

I will not be accessing the function inside the .on("click") event handler

What is the best way to extract data from Azure Data Lake and showcase it within an Angular-2 interface?

Is it possible to export all types/interfaces from .d.ts files within multiple folders using index.ts in a React TypeScript project?

implementing dynamic visibility with ngIf directive in Angular

Updating the active tab in the navigation bar whenever the router navigates

Tips for transforming a scroll element into the viewport using Angular 2+

Configuring a server-side rendered Angular application on Plesk hosting platform

Advantages of using index.js within a component directory

Updating Checkbox Appearance in Angular 6 Based on its Checked Status

Sometimes the downloaded xlsx file may become corrupted

Tips for validating Angular form group input depending on the value of another input within the form?

Issue: The function react.useState is either not defined or its output is not iterable

The integration of Meteor Angular2 with Mongodb underwent significant external modifications

What is the reason behind having the default router preloaded?

What could be causing the failure of the subscribe function to interpret the API response

Utilize dynamic injection of JavaScript code within Angular 5 for enhanced functionality

Developing a constrained variable limited to specific values

Using TypeScript with React Redux, encountering issue of property not being available in the Reducer from the ActionType