Looping through a large object array in the back-end using observables with RxJS

I have developed a basic number array and utilized rxjs for managing UI and the backend loop. Below is my code snippet:

const array100 = new Array(9703)
  .fill('x')
  .map((value, index) => index);

 Rx.Observable.from(array100)
  .delayWhen(function(value){return Rx.Observable.timer(value*50)})
  .buffer(Rx.Observable.timer(250, 250))
  .subscribe(chunk => {
    console.log('chunk ', chunk);
  });

After successfully creating this sample application, I attempted to implement it in my project with a larger object element array to manage both the UI and backend loop. However, when trying to utilize it, although the array can be observed, it does not chunk the array as expected. It simply passes through the method without any chunking occurring. Unfortunately, debugging this issue has proven difficult.

How can this be achieved using RxJS?

Answer №1

My recommendation is to carefully examine the provided operators. Many of the features you are attempting to implement are already available.

If you need to delay the emission of elements from your array, you can use:

.flatMap(val => Rx.Observable.just(val).delay(50)/*ms*/)

To chunk your array, you have options such as using count (if time is not a concern)

.bufferWithCount(50)/*elements per chunk */
, timing .bufferWithTime(250/*ms*/), or a combination of both (
.bufferWithTimeOrCount(250 /*ms*/, 50 /*elements */)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS POST request not functioning as expected

Seeking guidance in my AngularJS journey as a newcomer. I'm facing an issue where the call to the REST service is not reaching it despite including everything from controller and service to the actual service call. Here's a snippet of my code: ...

Is it possible for a function to alter the 'this' object in JavaScript?

Referencing the MDN article on this keyword in JavaScript When not in strict mode, 'this' in a function will point to the global object. However, attempting to modify a global variable within a function does not result as expected. Is there an ...

What is the best way to correctly render several React components using a single index.js file?

I am facing an issue with rendering two React component classes. One class creates a counter and works fine, while the other class generates a simple string wrapped in HTML tags but does not render. I have tried various tutorials to troubleshoot this probl ...

Difficulty with Vue.js updating chart JS label names

I have been working with Vue JS and implementing a chart in my single page application. However, I am encountering difficulties updating the Legend and despite numerous attempts and searches, I am unable to get it to update. Any assistance in correcting my ...

What is the correct method for service injection in Angular 8?

I have encountered an issue while trying to inject a service into my main "App" component. The error message is shown in the screenshot below: constructor(private newsApi: NewsApiService) {} Upon importing the service using the code above, I received the ...

Azure SQL Server linked with a REST API built on Express.js/Node.js encountered an error stating: "TypeError: req.sql is not a function"

Having trouble connecting to Azure SQL Server with express4-tedious. I'm working on building an app in react-native with a Node/Express server (REST API), but encountered this error after setting up express4-tedios in Express: req.sql is not a functio ...

Ensure selected language is maintained when refreshing or changing view by utilizing switch i18n functionality

Hello there, I am facing a challenge with "JavaScript Localization" on my website. The issue is that I cannot figure out how to prevent the DOM from prioritizing the local language of the browser and instead use the language set in the switch as a referenc ...

Troubleshooting why "ng-check="true" isn't functioning properly after radio choices update

Three columns of radio drop down boxes are present. When a user selects a radio button in the first column, the radio buttons in the second column refresh with a new list. The default behavior is for the top radio button all to be checked each time a new l ...

Delivering an XML file generated by PHP to a JavaScript parser

I'm in the process of creating a smart TV app that streams live content. The app functions properly when I provide it with a valid XML playlist. However, when I attempt to use PHP to generate the XML file (which generates without any issues), it fail ...

Stop the current HTTP request and initiate a new one asynchronously

My custom component showcases a detailed view of a selected building along with a list of its units (apartments). Below is the HTML code for this component: <div *ngIf="$building | async as building"> ... <div *ngIf="$buildingUnit ...

Discover the magic of integrating FeathersJS REST functionality within Angular with these simple steps

I've encountered a challenge while trying to make Feathers work in Angular with a Feathers REST server. It seems that no requests are being made. My Feathers server hosts the resource http://example.com/app/experiences which returns data in paginated ...

What could be causing the Ajax error to occur in my .Net Data table?

While trying to load a table, I encountered an ajax error in the datatable (.net). Below is the code for my data table: <table id="productsTable" class="table table-striped table-bordered"> <thead> <tr> <th>Name</th ...

Prevent incorrect data input by users - Enhancing JavaScript IP address validation

I have been trying to create a masked input field for entering IP addresses, but every solution I come across seems to have some flaws. The best solution I found so far is , but it still allows values higher than 255 to be entered. It works fine initially ...

What could be causing my Vuex state to remain unchanged even after the nuxtServerInit commit?

Although I've been utilizing the nuxtServerInit method to retrieve data from my Contentful CMS and commit the mutation to update the categories state object, I keep encountering an issue where categories remain empty even after attempting to display t ...

Downloading large video files using xhr in Chrome through JavaScript

There is a known issue causing Chrome tabs to crash when attempting to download large files (>50-80 Mb) using an ajax request (source: http://code.google.com/p/chromium/issues/detail?id=138506). Although Chrome is the only browser currently supporting ...

Efficiently altering values with Python Numpy

Currently in my program, I am generating a numpy array filled with zeros and then iterating over each element to replace it with the desired value. Is there a more efficient approach for accomplishing this task? Here is an example of what I am currently d ...

Encountering a problem with the starting seed for the Users database

I encountered an error while trying to create the initial seed. I'm able to seed the role collection successfully but facing issues with seeding the users collection. Can someone assist me in understanding why this error is occurring and how I can res ...

Organize the array by property name and include a tally for each group

My current data structure looks like this: var data = [ { MainHeader: Header1, SubHeader: 'one'}, { MainHeader: Header1, SubHeader: 'two'}, { MainHeader: Header2, SubHeader: 'three'}, { MainHeader: Header2, SubHea ...

Employing square bracket notation based on the input data

I'm currently in the process of enhancing some code within my library, but I've encountered a perplexing issue with bracket notation not functioning as expected when attempting to call an imported class. The parameter type expects a camelCased s ...

Use JavaScript's Array.filter method to efficiently filter out duplicates without causing any UI slowdown

In a unique case I'm dealing with, certain validation logic needs to occur in the UI for specific business reasons[...]. The array could potentially contain anywhere from several tens to hundreds of thousands of items (1-400K). This frontend operation ...