Using Behavior Subject for pagination in Angular with RxJS

Question

Using Behavior Subject for pagination in Angular with RxJS

Currently, I am creating a filtering system for a product list based on category IDs using the RXJS operator BehaviorSubject.

However, I have encountered an issue with implementing infinite scrolling with Behavior Subject because I am unable to access the previous array of data (referred to as products) since it always reflects the latest updates.

Here is my Service setup:

private productsSource = new BehaviorSubject<Product[]>(null);
public products$: Observable<Product[]> = this.productsSource.asObservable();

async getProductsByCategory(category: string, page: string = '1'): Promise<void> {
  const products = await this.http.get<Product[]>(`${environment.host + this.wooPath}products`, {
    params: {
      ...environment.configtations,
      category,
      page,
      lang: this.language,
      per_page: '6',
      not_tags: 'component'
    }
  })
    .toPromise();

  this.productsSource.next(products);
}

For handling pagination in loadMore function:

async loadData(event) {
 // How should I proceed next?
}

javascript angular typescript rxjs

Answer 1

Answer №1

Modify the line

this.productsSource.next(products);

to:

this.products.next({
   previous: this.products.value.current
   current: products
});

Here is the updated declaration:

private productsSource = new BehaviorSubject<any>(null);
// You could define a custom type like:
// { previous: Product[], current: Product[] }

This way, you will have access to both the previous set and the current set.

If your intention is to implement infinite scrolling, I recommend storing all values in a specific array like so:

products$.subscribe((value) => {
   this.someProductsArray = [...this.someProductsArray, ...value];
});

Answer 2

Modify the line

this.productsSource.next(products);

to:

this.products.next({
   previous: this.products.value.current
   current: products
});

Here is the updated declaration:

private productsSource = new BehaviorSubject<any>(null);
// You could define a custom type like:
// { previous: Product[], current: Product[] }

This way, you will have access to both the previous set and the current set.

If your intention is to implement infinite scrolling, I recommend storing all values in a specific array like so:

products$.subscribe((value) => {
   this.someProductsArray = [...this.someProductsArray, ...value];
});

Answer 3

Answer №2

I have discovered a solution that perfectly fits my current situation.

Here is the code snippet for it:

My approach: I simply return a list of products as a promise from the getProductsByCategory method:

/**
 * @name getProductsByCategory
 * @param category 
 * @param page 
 */
async getProductsByCategory(category: string, page: string = '1'): Promise<Product[]> {

  // Fetching products
  const products = await this.http.get<Product[]>(`${environment.host + this.wooPath}products`, {
    params: {
      ...environment.configtations,
      category,
      page,
      lang: this.language,
      not_tags: 'component'
    }
  })
    .toPromise();

  return products;
}

Additionally, I have implemented a new method to return the productsSource:

filteringProduct() {
  return this.productSource;
}

Within Component: Initializing in ngOnInit:

async ngOnInit() {
  // Obtain the category id
  const id = this.route.snapshot.paramMap.get('id');
  this.categoriesIds = id;

  // Retrieve category and its subcategories or products by category id
  [this.category, this.subCategories] = await Promise.all([
    this.wooService.getCategoryById(id),
    this.wooService.getSubCategories(id)]);

  // Setting products
  this.wooService
    .filteringProduct()
    .next(
      await this.wooService.getProductsByCategory(this.categoriesIds)
    );

  this.wooService.products$
  .pipe(
    takeUntil(this.unsubscribe)
  )
  .subscribe(data => this.products = data);

}

My loadMore Method:

async loadData(event) {

  // Incrementing page number
  this.currentPage++;

  // Fetching content of next page
  const nextPage = await this.wooService.getProductsByCategory(
    this.categoriesIds,
    this.currentPage.toString()
  );

  // Concatenating all data together
  this.products = this.products.concat(nextPage);

  // Completing the loading process
  event.target.complete();

  // Checking if all data has been loaded from the server
  if (nextPage.length === 0) {
    this.infinite = false;
  }

}

Answer 4

I have discovered a solution that perfectly fits my current situation.

Here is the code snippet for it:

My approach: I simply return a list of products as a promise from the getProductsByCategory method:

/**
 * @name getProductsByCategory
 * @param category 
 * @param page 
 */
async getProductsByCategory(category: string, page: string = '1'): Promise<Product[]> {

  // Fetching products
  const products = await this.http.get<Product[]>(`${environment.host + this.wooPath}products`, {
    params: {
      ...environment.configtations,
      category,
      page,
      lang: this.language,
      not_tags: 'component'
    }
  })
    .toPromise();

  return products;
}

Additionally, I have implemented a new method to return the productsSource:

filteringProduct() {
  return this.productSource;
}

Within Component: Initializing in ngOnInit:

async ngOnInit() {
  // Obtain the category id
  const id = this.route.snapshot.paramMap.get('id');
  this.categoriesIds = id;

  // Retrieve category and its subcategories or products by category id
  [this.category, this.subCategories] = await Promise.all([
    this.wooService.getCategoryById(id),
    this.wooService.getSubCategories(id)]);

  // Setting products
  this.wooService
    .filteringProduct()
    .next(
      await this.wooService.getProductsByCategory(this.categoriesIds)
    );

  this.wooService.products$
  .pipe(
    takeUntil(this.unsubscribe)
  )
  .subscribe(data => this.products = data);

}

My loadMore Method:

async loadData(event) {

  // Incrementing page number
  this.currentPage++;

  // Fetching content of next page
  const nextPage = await this.wooService.getProductsByCategory(
    this.categoriesIds,
    this.currentPage.toString()
  );

  // Concatenating all data together
  this.products = this.products.concat(nextPage);

  // Completing the loading process
  event.target.complete();

  // Checking if all data has been loaded from the server
  if (nextPage.length === 0) {
    this.infinite = false;
  }

}

Answer 5

Answer №3

To keep track of the page number, you can utilize the count() operator along with a regular subject for the task at hand.

currentPage = Subject();
getProduct = (page) =>
  this.http.get<Product[]>(`${environment.host + this.wooPath}products`, {
    params: {
      ...environment.configurations,
      category,
      page,
      lang: this.language,
      per_page: '6',
      not_tags: 'component'
    }
  });


data = loadMore.pipe(
  count(),
  mergeMap(page => getProduct(page)),
  scan((acc, curr) => {
    return acc.concat(curr.res)
  }, [])
);

Answer 6

To keep track of the page number, you can utilize the count() operator along with a regular subject for the task at hand.

currentPage = Subject();
getProduct = (page) =>
  this.http.get<Product[]>(`${environment.host + this.wooPath}products`, {
    params: {
      ...environment.configurations,
      category,
      page,
      lang: this.language,
      per_page: '6',
      not_tags: 'component'
    }
  });


data = loadMore.pipe(
  count(),
  mergeMap(page => getProduct(page)),
  scan((acc, curr) => {
    return acc.concat(curr.res)
  }, [])
);

Using Behavior Subject for pagination in Angular with RxJS

Answer №1

Answer №2

Answer №3

Similar questions

Creating a query string using a jQuery array that contains multiple values for a query variable

Expanding the number of buttons for <ul> in creating a responsive navigation system using Angular

Include the clicked link into the text input area using Ajax or Jquery

Is it necessary to have Node.js or Express in order to launch my Angular 2 application?

Steps to invoke a function in a PHP file from an external JavaScript file

When using jQuery, adding a class does not always trigger CSS animation

transition effect of appearing and disappearing div

Chart of commitments and potential outcomes

Receiving a 500 status code upon converting a SqlDataReader into Json format

Error: Undefined Property in Angular 2 ViewChild Declaration

Using the goBack function in React Router does not add the previous location to the stack

Submitting an mvc partial view form to send data from the parent view

Customizing Material UI Stepper styles using CSS API

Troubleshooting tips for when JavaScript fails to load

Searching for the way to access the values of a nested object's ref in Vue JS?

When attempting to install font-awesome with meteor npm, the module 'fontawesome'" was not found

Ways to adjust timestamps (DayJs) by increments of 1 minute, 5 minutes, 15 minutes, 30 minutes, and more

Navigating between primary and named routes in Angular using RouterLink

Refresh a div using jQuery and include PHP files for dynamic content updating

Confirming the manipulation of Node.js callbacks