Strategies for dynamically appending data to `from([urls])` using RxJS

Question

Strategies for dynamically appending data to `from([urls])` using RxJS

const dataResults = [];
from(generateMoreUrls())
    .pipe(
     mergeMap( url => fetch(url), 4) 
  ).subscribe(dataResult => {
    dataResults.push(dataResult);
 });


function generateMoreUrls() {
  let additionalUrls = [];
  for(let i = 101; i <= 200; i++) {
     additionalUrls.push(`https://jsonplaceholder.typicode.com/todos/${i}`);
  }
  return additionalUrls;
}

Is there a way to add more urls to from in order to obtain additional data?

typescript rxjs

Answer 1

Answer №1

If you want to store and push URLs using BehaviorSubject, simply create a BehaviorSubject instance for urls and then use urls.next(..newUrl) to add items to the stream.

import { BehaviorSubject, of } from 'rxjs'; 
import { map,mergeMap } from 'rxjs/operators';


const urls=new BehaviorSubject(null)

const results = [];
function generateUrl() {
  for(let i = 1; i <= 9; i++) {
     urls.next(`https://jsonplaceholder.typicode.com/todos/${i}`);
  }
}

urls.pipe(
     mergeMap( url => fetch(url).then(res=>res.json()).catch(e=>e)

     , 4) 
  ).subscribe(result => {
    results.push(result);
    console.log(results)
 });

generateUrl()


setTimeout(()=>urls.next(`https://jsonplaceholder.typicode.com/todos/10`),2000)

https://stackblitz.com/edit/rxjs-xw9dft

Answer 2

If you want to store and push URLs using BehaviorSubject, simply create a BehaviorSubject instance for urls and then use urls.next(..newUrl) to add items to the stream.

import { BehaviorSubject, of } from 'rxjs'; 
import { map,mergeMap } from 'rxjs/operators';


const urls=new BehaviorSubject(null)

const results = [];
function generateUrl() {
  for(let i = 1; i <= 9; i++) {
     urls.next(`https://jsonplaceholder.typicode.com/todos/${i}`);
  }
}

urls.pipe(
     mergeMap( url => fetch(url).then(res=>res.json()).catch(e=>e)

     , 4) 
  ).subscribe(result => {
    results.push(result);
    console.log(results)
 });

generateUrl()


setTimeout(()=>urls.next(`https://jsonplaceholder.typicode.com/todos/10`),2000)

https://stackblitz.com/edit/rxjs-xw9dft

Answer 3

Answer №2

Mixing an action stream (such as adding an action) with your data stream allows for a seamless flow of adding items to your stream by incorporating them into the action stream.

Here is a customizable example that showcases this concept:

// Retrieve all products
products$ = this.http.get<Product[]>(this.productsUrl)
    .pipe(
      tap(data => console.log('Products', JSON.stringify(data))),
      catchError(this.handleError)
);

// Action Stream
private productInsertedSubject = new Subject<Product>();
productInsertedAction$ = this.productInsertedSubject.asObservable();

// Merge the streams
productsWithAdd$ = merge(
    this.products$,
    this.productInsertedAction$
 )
   .pipe(
       scan((acc: Product[], value: Product) => [...acc, value]),
       catchError(err => {
           console.error(err);
           return throwError(err);
       })
 );

 addProduct(newProduct: Product) {
     this.productInsertedSubject.next(newProduct);
 }

To add more items (in this case, products), simply utilize the addProduct function and provide the necessary input.

LATEST UPDATE: I have adjusted the code above to better suit your specific requirements:

results = [];

// Data stream
urls$ = from(this.generateUrls());

// Action Stream
private newUrlSubject = new Subject<string>();
newUrlAction$ = this.newUrlSubject.asObservable();

// Merge the streams
urlsWithAdd$ = merge(
    this.urls$,
    this.newUrlAction$
)
   .pipe(
       tap(url => console.log('url:', url)),
       mergeMap(url => this.http.get(url), 4),
       tap(result => this.results.push(result))
);

constructor(private http: HttpClient, ) {
    this.urlsWithAdd$.subscribe();
}

generateUrls() {
    let urls = [];
    for (let i = 1; i <= 20; i++) {
        urls.push(`https://jsonplaceholder.typicode.com/todos/${i}`);
    }
    return urls;
}

addUrl(newUrl: string) {
    this.newUrlSubject.next(newUrl);
}

onClick() {
    this.addUrl(`https://jsonplaceholder.typicode.com/todos/42`);
}

The complete code can be accessed here: https://stackblitz.com/edit/angular-rxjs-adding-items-deborahk

PLEASE NOTE: The use of fetch was not viable due to its promise-based nature, unlike Observables. However, you could explore alternatives like from(fetch(...))?

Answer 4

Mixing an action stream (such as adding an action) with your data stream allows for a seamless flow of adding items to your stream by incorporating them into the action stream.

Here is a customizable example that showcases this concept:

// Retrieve all products
products$ = this.http.get<Product[]>(this.productsUrl)
    .pipe(
      tap(data => console.log('Products', JSON.stringify(data))),
      catchError(this.handleError)
);

// Action Stream
private productInsertedSubject = new Subject<Product>();
productInsertedAction$ = this.productInsertedSubject.asObservable();

// Merge the streams
productsWithAdd$ = merge(
    this.products$,
    this.productInsertedAction$
 )
   .pipe(
       scan((acc: Product[], value: Product) => [...acc, value]),
       catchError(err => {
           console.error(err);
           return throwError(err);
       })
 );

 addProduct(newProduct: Product) {
     this.productInsertedSubject.next(newProduct);
 }

To add more items (in this case, products), simply utilize the addProduct function and provide the necessary input.

LATEST UPDATE: I have adjusted the code above to better suit your specific requirements:

results = [];

// Data stream
urls$ = from(this.generateUrls());

// Action Stream
private newUrlSubject = new Subject<string>();
newUrlAction$ = this.newUrlSubject.asObservable();

// Merge the streams
urlsWithAdd$ = merge(
    this.urls$,
    this.newUrlAction$
)
   .pipe(
       tap(url => console.log('url:', url)),
       mergeMap(url => this.http.get(url), 4),
       tap(result => this.results.push(result))
);

constructor(private http: HttpClient, ) {
    this.urlsWithAdd$.subscribe();
}

generateUrls() {
    let urls = [];
    for (let i = 1; i <= 20; i++) {
        urls.push(`https://jsonplaceholder.typicode.com/todos/${i}`);
    }
    return urls;
}

addUrl(newUrl: string) {
    this.newUrlSubject.next(newUrl);
}

onClick() {
    this.addUrl(`https://jsonplaceholder.typicode.com/todos/42`);
}

The complete code can be accessed here: https://stackblitz.com/edit/angular-rxjs-adding-items-deborahk

PLEASE NOTE: The use of fetch was not viable due to its promise-based nature, unlike Observables. However, you could explore alternatives like from(fetch(...))?

Strategies for dynamically appending data to `from([urls])` using RxJS

Answer №1

Answer №2

Similar questions

Using Angular NgUpgrade to inject an AngularJS service into an Angular service results in an error message stating: Unhandled Promise rejection: Cannot read property 'get' of undefined; Zone:

What is the best way to incorporate a module from an external 'include' folder in your code?

Using TypeScript with MongoDB aggregation

Why is it necessary to define a property outside the constructor in Typescript, when in Javascript I wouldn't have to do that?

Is it feasible to utilize the redirectTo function alongside the children parameter?

Adding a function to an interface in React Typescript: A step-by-step guide

Retrieving an array of objects from an API and attempting to store it using useState, but only receiving an empty

When I refresh the page in Angular2, the router parameters do not get loaded again

Stop fullscreen mode in Angular after initiating in fullscreen mode

Steps for modifying the settings of an express function

Determining if an object aligns with a specific type in Typescript

Sundays and last days are excluding React-big-calendar and dayjs longer events from being displayed

Encountering a "Missing Access" error on the Discord.js API when trying to register my slash commands

405 we're sorry, but the POST method is not allowed on this page. This page does

Passing data and events between components in React

Can anyone provide a workaround for bypassing ts 2339 error in order to access class methods? Alternatively, is it feasible to define class methods outside of the class in typescript?

typescript, generate a new type by merging option values

Troubleshooting property assignment issues within an Angular service

Guidelines for implementing more rigorous type checks in TypeScript:

Executing RxJS calls in a sequential manner while allowing inner calls to operate in