What is the best method for combining two observables into one?

Question

What is the best method for combining two observables into one?

My goal is to initialize a list with 12 users using the URL

${this.url}/users?offset=${offset}&limit=12

. As users scroll, the offset should increase by 8. I plan to implement infinite scrolling for this purpose. However, I am facing an issue with appending the new list of 8 members to the existing one.

I am currently using observables(userList) and struggling to find a solution. Most tutorials online recommend using concat(), but that method is designed for arrays. I tried incorporating the logic to add the list + 8 offset when loadMore is true without success.

Here's a snippet of my code:

service.ts

// Fetch a list of users
getList(offset = 0): Observable<any> {
    return this.http.get(`${this.url}/users?offset=${offset}&limit=12`);
}

page.ts

@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
userList: Observable<any>;
offset = 0;
...

getAllUsers(loadMore = false, event?) {
    if (loadMore) {
        this.userList = this.userService.getList(this.offset += 8) // Get new 8 users
            .pipe(map(response => response.results));
    }
    
    this.userList = this.userService.getList(this.offset) // Initialize 12 users
        .pipe(map(response => response.results));
        
    if (event) {
        event.target.complete();
        console.log(event);
        console.log(loadMore);
    }
}

page.html

...
</ion-item>

</ion-list>
<ion-infinite-scroll threshold="100px" (ionInfinite)="getAllUsers(true, $event)">
    <ion-infinite-scroll-content
         loadingSpinner="crescing"
         loadingText="Loading more data...">
    </ion-infinite-scroll-content>
</ion-infinite-scroll>

</ion-slide>

<ion-slide>

javascript angular typescript ionic-framework observable

Answer 1

Answer №1

Utilize the Merge function to combine multiple observables into one:

getAllUsers(loadMore = false, event?) {
    if (loadMore) {
      const newUserList$ = this.userService.getList(this.offset += 8) //new 8 users
    .pipe(map(response => response.results));
    this.userList = merge(this.userList, newUserList$); // merge observables

    }
    this.userList = this.userService.getList(this.offset) // initials 12 users
    .pipe(map(response => response.results));
    if (event) {
      event.target.complete();
      console.log(event);
      console.log(loadMore);
    }
  }

Update

Based on your URL, it may be advisable to remove the limit parameter:

  getList(offset= 0): Observable<any> {
    return this.http.get(`${this.url}/users?offset=${offset}`);
  }

Answer 2

Utilize the Merge function to combine multiple observables into one:

getAllUsers(loadMore = false, event?) {
    if (loadMore) {
      const newUserList$ = this.userService.getList(this.offset += 8) //new 8 users
    .pipe(map(response => response.results));
    this.userList = merge(this.userList, newUserList$); // merge observables

    }
    this.userList = this.userService.getList(this.offset) // initials 12 users
    .pipe(map(response => response.results));
    if (event) {
      event.target.complete();
      console.log(event);
      console.log(loadMore);
    }
  }

Update

Based on your URL, it may be advisable to remove the limit parameter:

  getList(offset= 0): Observable<any> {
    return this.http.get(`${this.url}/users?offset=${offset}`);
  }

Answer 3

Answer №2

One approach to effectively handle data accumulation while the user scrolls is utilizing the scan operator.

To continuously add and accumulate data as the user scrolls, consider implementing a BehaviorSubject that emits values during each scroll event. This type of subject is chosen for its ability to provide an initial value.

const loadUsersSubject = new BehaviorSubject<number>(12);
let userList$/* : Observable<any>; */ // Uncomment this if used inside the template along with the async pipe
let internalCnt = 0;

const generateUsers = (n: number) => {
  return of(
    Array.from({ length: n }, ((_, i) => ({ user: `user${++internalCnt}` })))
  );
}

userList$ = loadUsersSubject
  .pipe(
    flatMap(numOfUsers => generateUsers(numOfUsers)),
    scan((acc, crt) => [...acc, ...crt])
  )
  .subscribe(console.log)


// Simulating scrolling after 1s..
timer(1000)
  .subscribe(() => {
    loadUsersSubject.next(8);
  });


// Simulating scrolling after 3s..
timer(3000)
  .subscribe(() => {
    loadUsersSubject.next(8);
  });

Click here for a live demo on StackBlitz

Answer 4

One approach to effectively handle data accumulation while the user scrolls is utilizing the scan operator.

To continuously add and accumulate data as the user scrolls, consider implementing a BehaviorSubject that emits values during each scroll event. This type of subject is chosen for its ability to provide an initial value.

const loadUsersSubject = new BehaviorSubject<number>(12);
let userList$/* : Observable<any>; */ // Uncomment this if used inside the template along with the async pipe
let internalCnt = 0;

const generateUsers = (n: number) => {
  return of(
    Array.from({ length: n }, ((_, i) => ({ user: `user${++internalCnt}` })))
  );
}

userList$ = loadUsersSubject
  .pipe(
    flatMap(numOfUsers => generateUsers(numOfUsers)),
    scan((acc, crt) => [...acc, ...crt])
  )
  .subscribe(console.log)


// Simulating scrolling after 1s..
timer(1000)
  .subscribe(() => {
    loadUsersSubject.next(8);
  });


// Simulating scrolling after 3s..
timer(3000)
  .subscribe(() => {
    loadUsersSubject.next(8);
  });

Click here for a live demo on StackBlitz

Answer 5

Answer №3

Learn how to utilize the scan operator to enhance the state with subsequent requests.

Click here for a demo

import { of, Observable } from 'rxjs'; 
import { map, scan } from 'rxjs/operators';


const source = new Observable((observer) => {
  observer.next(['Welcome', 'to Coding']);

  setTimeout(() => {
    observer.next(['This', 'is', 'amazing']);
  }, 1000)

   setTimeout(() => {
    observer.next(['Learning', 'is', 'fun']);
  }, 2000)
}).pipe(
    scan(
      (acc, val) => acc.concat(val),
      []
    )
);

source.subscribe(x => console.log(x));

Answer 6

Learn how to utilize the scan operator to enhance the state with subsequent requests.

Click here for a demo

import { of, Observable } from 'rxjs'; 
import { map, scan } from 'rxjs/operators';


const source = new Observable((observer) => {
  observer.next(['Welcome', 'to Coding']);

  setTimeout(() => {
    observer.next(['This', 'is', 'amazing']);
  }, 1000)

   setTimeout(() => {
    observer.next(['Learning', 'is', 'fun']);
  }, 2000)
}).pipe(
    scan(
      (acc, val) => acc.concat(val),
      []
    )
);

source.subscribe(x => console.log(x));

What is the best method for combining two observables into one?

Answer №1

Update

Answer №2

Answer №3

Similar questions

CSS switch status toggle

Postpone the NgModule declaration by importing the module asynchronously

Can a specific element be chosen based on its background color?

Verifying whether every value in the X array is present in the Y array or not

Struggling to add phantom-js to my Angular project

Tips for effectively utilizing the Ngrx navigation function

What's the process for converting offsetX and offsetY pixel coordinates to percentages?

Utilizing Jquery to add a delay and animate the sliding up effect on a recently created element

Trigger the opening of a bootstrap modal from an external source on the current page

Displaying elapsed time in JavaScript (Node.js)

Is there a way to transform time into a percentage with the help of the moment

Tips for transferring data from a table row to a bootstrap modal in Angular 2

angular.js watch() method is not functioning properly during a JSON call

Using a functional wrapper component to reset the modal field in Reactstrap upon closing and reopening

Why are two vertical scrolls appearing on the screen simultaneously?

Create a cookie using the JavaScript option

Guide to updating current rjs files to incorporate jQuery and json in Rails 3

JavaScript - undefined results when trying to map an array of objects

Discovering the ins and outs of utilizing Validator.pattern in Angular 9

Attempting to launch my node project through the terminal in my VS Code environment